How to Add a Simple jQuery Script to WordPress

Most WordPress site owners & developers use plugins to add functionality to a WordPress site, but what if you don’t want to use a plugin? What if you want to create your own function by adding a simple jQuery script to WordPress?

In this step-by-step guide, I’ll show you how to add a simple jQuery script to your WordPress website.

Step 1: Create Your jQuery Script File

Start by creating a file with your jQuery code written inside the file. For example, your file name may look like this,

your-script.js

When adding your jQuery script to the .js file, you don’t need the <script> tags. When working with jQuery, you simply use ‘jQuery’ at the start of the function rather than ‘$’.

Here is an example of how your jQuery script may look like:

jQuery(document).ready(function($) { 
    $('#nav a').last().addClass('last'); 
})

Step 2: Create a Folder Within Your Theme Folder

Within your theme folder, create a sub-folder titled “js”.

Next, add your jQuery script file to this folder. The location of your file should look something like this:

wp-content/themes/your-theme/js/your-script.js

Step 3: Enqueue Your jQuery Script

Next, you need to tell WordPress to load the jQuery script file with your theme.

You can do this by enqueueing the .js file in your theme’s functions.php file. If you’re creating a theme from scratch, then you will need to create the functions.php file. If you’re working with a child theme, then be sure to check to see if the parent theme has jQuery added already.

Within the functions.php file, you will want to use the wp_enqueue_script() function to add your script while also telling WordPress that it depends on jQuery.

To do that, your code should look something like this:

add_action( 'wp_enqueue_scripts', 'add_my_script' ); 
function add_my_script() { 
    wp_enqueue_script( 
         'your-script', // name your script so that you can attach  
         other scripts and de-register, etc. 
         get_template_directory_uri() . '/js/your-script.js', // this
         is the location of your script file 
         array('jquery') // this array lists the scripts upon which
         your script depends 
    ); 
}

Step 4: Test it Out

If your theme has wp_head and wp_footer functions included in the proper files, this should work perfectly. If your code doesn’t work, I would suggest using a troubleshooting tool such as Chrome Developer Tools.

Utilizing jQuery on your WordPress site may seem like a daunting task at first, but it’s actually much easier than you think. Once you master the ability to code and add scripts to your WordPress site, you won’t have to depend on third party plugins to add functionality any longer.