## 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](journal/wordpress-from-the-ground-up/) 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: - 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`. - 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: ++>groovy-magic.js<++ ``` javascript 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. - In your `functions.php` file, find the [enqueue function we wrote earlier](/journal/how-to-create-a-divi-child-theme-in-wordpress/) called `groovy_enqueue_scripts()`. Add the following code to that function block: ++>functions.php<++ ``` php 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 (``). I don’t like to load scripts in the `` 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: - Remember the dependency array above? Just add `jquery` as a string like so: ++>functions.php<++ ```php wp_enqueue_script( 'groovy-magic', get_stylesheet_directory_uri() . '/js/groovy-magic.js', array('jquery'), null, true ); ``` - 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: ++>groovy-magic.js<++ ```javascript 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! - 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: ++>groovy-magic.js<++ ```javascript 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!