How to Add JavaScript to Your WordPress Child Theme

By Sunjay Armstead |
March 11, 2022

Extra Functionality for the Win!

When I develop WordPress child themes, I often find that I need to add JavaScript functionality that’s not available out of the box with WordPress or my parent theme. Thankfully, doing this is really simple once you have your child theme workflow in place.

If you haven’t already, I suggest you start at the beginning of the What the WordPress?! series to learn how to create your child theme.

Easy Peasy Enqueuing

There are actually several ways to add JavaScript code to your child theme. By far my favorite way is to use a WordPress function called wp_enqueue_script() to load in the JavaScript file from the functions.php file.

Here’s how to do that:

  1. In the root of your child theme folder, create a new directory called js. Inside of js create a JavaScript file that you’d like to load in your child theme. Mine will be called groovy-magic.js.
  2. I like to log a string to the console to verify that my enqueue function is working as expected. Inside of groovy-magic.js add a logging statement:
console.log('groovy magic!');

The code above is only for development. Always make sure to remove debugging statements like this when you are ready to commit your code and push it to production.

  1. In your functions.php file, find the enqueue function we wrote earlier called groovy_enqueue_scripts(). Add the following code to that function block:
wp_enqueue_script( 'groovy-magic', get_stylesheet_directory_uri() . '/js/groovy-magic.js', array(), null, true );

This code does the following things (see the WordPress documentation for even more insight):

  • 'groovy-magic' is the unique name of our script. This is a required parameter of the wp_enqueue_script() function.
  • get_stylesheet_directory_uri() . '/js/groovy-magic.js' concatenates the full file path to our JavaScript file. get_stylesheet_directory_uri() is a WordPress function that returns the location of the active theme’s root directory (in this case, our child theme). '/js/groovy-magic.js' is the relative path to our JavaScript file.
  • array() is a placeholder for now. Here you can add dependencies that your script will need like jquery. More on this later!
  • null tells WordPress that our script doesn’t have a version number. Adding versioning can help with cache busting, but I tend to leave this as null.
  • true tells WordPress to load the script before the closing body tag (</body>). I don’t like to load scripts in the <head> unless I absolutely have to, since doing so could slow down page load time.

Now refresh your browser and inspect the page. You should see 'groovy magic' in the console!

If not, make sure to check the syntax in your functions.php file. PHP requires semicolons, the first / in your file path is needed, and make sure you are closing your strings properly.

Fun with jQuery

One thing I love about WordPress is that jQuery can be loaded by WordPress for you. If you’d like to learn jQuery, I recommend you check out Codecademy’s Learn jQuery course. That’s how I learned!

Here’s how to add jQuery to your child theme:

  1. Remember the dependency array above? Just add jquery as a string like so:
wp_enqueue_script( 'groovy-magic', get_stylesheet_directory_uri() . '/js/groovy-magic.js', array('jquery'), null, true );
  1. Now you can add jQuery to your groovy-magic.js file! Let’s add a ready function to load our code after the DOM is fully loaded:
jQuery(document).ready(function($) {
	console.log('groovy dropdown!');
});

This jQuery block may look a little strange. That’s because WordPress loads jQuery in compatibility mode to avoid code conflicts with other JavaScript libraries. See Jason Champagne’s article on jQuery for more details.

Now refresh your browser and inspect the page again. You should still see 'groovy magic' in the console!

  1. From here you can add all sorts of fun jQuery code to make your child theme stand out. For instance, you can hide all elements with the groovy-toggle class on page load and show them again when a button with a class of groovy-button is clicked:
jQuery(document).ready(function($){
    $('.groovy-toggle').hide();

    $('.groovy-button').on('click', function(event) {
        event.preventDefault();
        $('.groovy-toggle').show();
    })
});

You’re Well on Your Way

We’ve done quite a bit together at this point in our series. We’ve spun up a local WordPress environment, created a Divi child theme, set up a solid Git workflow, and added JavaScript to our child theme. Give yourself a pat on the back!

Coming up, we’ll build off our learnings by adding custom PHP and handling deployment. Until then, please share this series with a friend!