Wordpress using javascript giving errors

Question

I purchased a html5 theme and I wanted to convert it to wordpress theme so my structure is:

css
js
images
index.php
header.php
footer.php
function.php
comments.php
single.php
page.php

I added my css style this way because I don't want to enqeue it didn't work as attendant

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/grid.css">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/style.css">  
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/jquery.fancybox.css"> 

and like that my style perfectly working but when it comes to js files i did the same way

<script src="<?php bloginfo('template_directory'); ?>/js/script.js"></script>

so when i open the inxdex.php the site work like charm working the same way it is before i made it wordpress theme but when i go to single.php to view one post my style is working but my js isn't it console says: errors like

Uncaught TypeError: $ is not a function or

jQuery is undefined

or

this version is deprecated

So what I have to do to make it work on single.php while it works on index.php doing in function.php also gave me the same errors f.e

 wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '3.3.6', true );

so what i want a way just to make the single.php looks as normal as index.php P.S i put my js files in both mythem/js/ and wordpress/js directory to make it work in my index.php my index have

<script src="js/jquery.js"></script>
<script src="js/jquery-migrate-1.2.1.js"></script

and it works so please is there a way to make this also works inside of single.php if this is helpful i am making a site to post articles and i want to be under wordpress because it is easier to use than creating a site from the html theme i bought so i just want my javascrpit files to work on every page somehow thanks in advance

Answer 1

The reason you are getting Uncaught TypeError: $ is not a function is because jquery's $ is not allowed by wordpress when jquery is en-queued. In order to prevent library syntax collision

There are a few ways to make your code compliant with wordpress, my preferred method is wrapping all your jquery code in that file with the following wrapper function:

jQuery(document).ready(function($){ //you can now use $ as your jQuery object. var body = $( 'body' ); });

This solution was acquired from this other question, there are some other valuable things in their that you should read as well.