Wordpress how to add jquery to Moodle project

Question

I am trying to add jquery to my moodle project

I added this to additional.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

I keep getting the mistake $ is not defined why?

can you explain?

Answer 1

First make sure that jquery is loaded on your page. Put this in your functions.php.

add_action('wp_enqueue_scripts', 'enqueue_my_files');
function enqueue_my_files(){
  wp_enqueue_script('jquery');
}

And in your javascript section, use this syntax to define $ and then write your jquery code inside it

jQuery(document).ready( function($){

  // you could put your jquery code in here!

});