How to add jQuery to your WordPress theme

How to add jQuery to your WordPress theme

Abbey Fitzgerald's Layout avatar

jQuery is a very popular, if not the most popular, Javascript library. It’s a clear, concise library, and more importantly, it’s fast. Being relatively small in size, in most cases, it works well without slowing load time down. It simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation, event handling, and animating. It allows you to add this interactivity to your site quickly, without the need to write vanilla JavaScript.

jquery-site

Why is jQuery so great?

  • It’s lightweight compared to most other JavaScript frameworks.
  • It has a wide range of plugins available for various needs.
  • It is easy for designers and developers to learn.
  • It’s included with WordPress.

jQuery is so popular that WordPress automatically comes with it loaded. (This started in  WordPress 3.8.1.) Just because WordPress comes with jQuery, however, does not mean it is ready for use right out of the box. If you are using or creating a theme where jQuery is not called yet, you will have to do a couple things before you can start utilizing it.

How to add jQuery functionality to your WordPress theme

While WordPress comes with jQuery, you still have to make sure that you are actually adding it to your theme so you can use it. This is done by enqueueing the script and then specifying and adding to a file with the jQuery code snippets. This can be done in two simple steps.

Remember: You should never make changes on a live site. Our free local development app, Local by Flywheel, will help you simplify your workflow and safely experiment with your site. Try it today!

First, make your script file and put it in the theme folder

Create a new JavaScript file and place it in the desired theme folder. Most often, designers create a js folder to keep things organized. For this example, I’ll  add a file called custom_scripts.js, which is placed in a subfolder of the theme folder. The path would look like this: mytheme/js/custom_script.js. With jQuery, the file extension will have a .js on the end, just like we do with regular JavaScript files, so there is nothing new there.

Below is an example of a simple jQuery script that could go into the custom_script.js file. This is a good way to test things out.

jQuery(document).ready(function(){
 jQuery("#test-script").html("jQuery says Hello World");
});

In your page content, make a div with an id of #test-script and you will be able to test that jQuery is loading properly.

<div id=”test-script”>

</div>

jquery-test

If you’ve worked with jQuery in the past, you may be used to seeing a lot of $ signs. This became quite common because it serves as a function or variable name. If you’re looking at the example above and wondering where the dollar sign is, there is a reason why it’s not shown. WordPress uses jQuery in no-conflict mode. Instead of the dollar sign, you will see “jQuery.”

Second, find or create a functions.php file

If you are creating a theme from scratch, you may need to add a functions.php file. If it is an existing theme, chances are there is one already, so you’ll simply add to it. Copy and paste the code below into the functions.php file.

If you’re creating a child theme, keep in mind that it’s a good idea to check the parent theme to see if jQuery has been added already. If this is the case, you do not need add anything to the functions.php file.

<?php
 
function add_custom_script() {
    wp_register_script('custom_script', home_url() . '/wp-content/themes/mytheme/js/custom_script.js', array( 'jquery' ));
    wp_enqueue_script('custom_script');
}  
add_action( 'wp_enqueue_scripts', 'add_custom_script' );
 
?>

Now the jQuery library and custom_script.js will be loaded in the header of every page, with the exception of the admin pages. If you prefer jQuery to be loaded in the footer, it requires some additional registering and deregistering. You can read about how to do that in the Codex.

Troubleshoot if necessary

Even if jQuery seems to be working just fine, it is good to become acquainted with developer tools to help with troubleshooting. Chrome Developer Tools are great and can save a lot of headaches. If you find that things are not behaving with jQuery, pinpointing the error is always the first step.

console

Accessing Chrome Developer tools is easy. To see this, right-click anywhere on the page and select ‘Inspect Element.’ When the Developer toolbar opens, click on the ‘Console’ tab. You’ll see any JavaScript errors there. For example, if jQuery was not loading, there would be a message stating something like “(Uncaught ReferenceError: jQuery is not defined).” Once in awhile, the message might be confusing. Copy, paste, and do a little Googling to find out more about the problem. Chances are, someone else has had the same problem and may have found the solution.

With just a few additions to your WordPress site, you will be utilizing the jQuery library. With the ability to write custom scripts quicker than traditional JavaScript, you will love the efficiency it offers. To learn more about jQuery and other helpful plugins, visit the official jQuery site.

Looking for some other JavaScript libraries to use? Here are 20 we think you’ll love.

This post was originally published on March 3, 2016 and was last modified March 13, 2018.

Comments ( 13 )

  1. Gideon

    April 21, 2017

    Hi

    I put your code into custom_script.js in a subfolder (called js) of my twentyseventeen and put the following in a page :

    When I visit my website I only get the above text, while I was expecting : jQuery says Hello World

    I am using XAMPP and workong on localhost. What am I missing?

    Regards

    • James Denning

      July 5, 2017

      Gideon: See my comment below.

      • Paul McGowan

        October 15, 2017

        I cant get this to work in the WordPress Bootstrap starter theme or a few others, what am I missing, its straightforward enough ?

  2. Colleen Gratzer

    May 3, 2017

    This worked great! The easiest explanation I've found on how to do this. Thanks!

  3. James Denning

    July 5, 2017

    Be careful - that 1.0.2 is my child theme version number. To have this function NOT look for a version this must be null If not entered the default is false which causes this call to insert the the current twentyseventeen version and unless your child has the same version number as the current version of twentyseventeen this will not load. The easiest way is to either insert (and keep up to date) the version of your child theme or use null but you must use something. For more info: https://developer.wordpress.org/reference/functions/wp_enqueue_script/

    wp_enqueue_script( 'child-theme-js' , get_stylesheet_directory_uri() . '/child-theme-js.js' , array( 'twentyseventeen-global' ), '1.0.2', true );

    wp_enqueue_script( 'child-theme-js' , get_stylesheet_directory_uri() . '/child-theme-js.js' , array( 'twentyseventeen-global' ), null, true );

  4. Techs Heap

    August 30, 2017

    Nice post here. I have used first option to add jquery to my wordpress page. Thanks for the post.

  5. Priyank

    September 8, 2017

    Very nice informational blog . Useful query and also all the information of this blog very understandable . Its very useful for my blog http://www.itubeinfo.com

  6. Ammy Sharma

    September 24, 2017

    I thought your are very good content writer you have power of exppaination in you blogs i gave you 5 rating to this blog

  7. vaibhav patel

    January 12, 2018

    First of all thanks for sharing this article great information. I have used first option to add jquery to my wordpress page. Thanks for the post.

  8. onewp

    January 13, 2018

    i done everything you say but why dont work on my website...!!!?

  9. Jeremy

    March 15, 2018

    With a small change to the jQuery wrapper, you can use the "$" in WordPress, rather than "jQuery" each time.

    Just wrap it in this:

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

    // stuff

    });

  10. Rodzinka.pl odcinek 230

    March 23, 2018

    I am really glad to read this webpage posts which carries tons of useful facts, thanks for providing
    such information.

  11. famousnames.in

    July 13, 2018

    Thanks a lot

  12. Anonymous

    August 29, 2018

    If anyone's having issues with this then make sure the quotation marks in the div with "test-script" are normal quotation marks.

    This page appears to use different quotation marks, meaning it won't work if you copy and paste from here.

    Amazing tutorial by the way. Super clear :)

  13. Juan Carlos

    September 20, 2018

    Thks alot you helped me to understand more wordpress stuffs!!!

Join the discussion