What’s the best way to add jQuery to Underscores (_s) WordPress theme?

3 comments

1. The best method is to use the WordPress function wp_enqueue_script() in your Underscores created theme functions.php file.

   Find the function <THEME_NAME>_scripts (where <THEME_NAME> is your theme name when generated from Underscores website) and prepend the code below, under <THEME_NAME>_scripts function (before any other wp_enqueue_script)

   // deregister default jQuery included with WordPress
   wp_deregister_script( 'jquery' );
   
   $jquery_cdn = 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js';
   wp_enqueue_script( 'jquery', $jquery_cdn, array(), '3.4.1', true );
   

   Log in to Reply

2. Underscores doesn’t enque any javascript which rely on jquery. So a default install will not load the default jquery in WordPress without it being set as a dependency when enqueing a javascript file with wp_enqueue_script.

   An example of loading bootstrap into underscore and loading jquery from WordPress is

   wp_enqueue_script('bootstrap', get_template_directory_uri().'/assets/javascripts/bootstrap.min.js', array('jquery'),'v3',true);

   You can do the same with a jquery file from a CDN registered in WordPress

   Log in to Reply

3. You can use this snippet in either your header.php or footer.php:

   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   

   This uses the Google hosted jQuery.

   Note: WordPress ships with jQuery so if you are using Underscores as a WordPress theme then jQuery will be already enqueued.

   Ref: https://developers.google.com/speed/libraries/devguide#jquery

   Log in to Reply