How To Add Javascript to WordPress Safely

Illustrator by Moi

There will come a point when you want to add interactivity to your WordPress site. That means: hello JavaScript. But how do you add JavaScript to WordPress the right way, so you can have a cool site without losing sleep?

In WordPress, there is a particular way to modify your site. When it comes to JavaScript, it’s called enqueuing.

You will rarely use this geeky word in real life but it is worth learning, otherwise, you risk breaking your site.

Adding JavaScript the Traditional Way

In HTML, JavaScript codes are inserted between the <script> and </script> tags. It’s as simple as that.

But, what about a content management system like WordPress, where each page is loaded using a different PHP file according to the WordPress template hierarchy? Let’s go back to the fundamentals of WordPress.

Adding JavaScript the Right Way

WordPress, as a content management system, is as different from the traditional static sites as possible.

It is an ecosystem which uses one active theme and usually multiple plugins. Each theme and plugin, in turn, consist of many files, ranging from PHP and JavaScript to CSS.

Thus, a WordPress site can become disorganized very quickly. For everything to work harmoniously, developers are recommended to load JavaScript and CSS following the standard WordPress method, called enqueue.

Enqueue may be an unfamiliar concept for new WordPress developers, but in the end, we are still better with it than without it.

Step 1: Create a Child Theme

You may be asking: “Why bother making a child theme, instead of diving in right away?”

If you make modifications to your parent theme and you update the theme sometime in the future, you will lose those changes.

Another reason is that creating a child theme takes about five minutes. If you have taken the trouble of adding JavaScript to your WordPress site, why not spend another five minutes as a countermeasure?

In case you don’t know how to to that, check out my tutorial for making a WordPress child theme.

Step 2: Create Your Custom JavaScript File

A question I had when I started to tinkle with JavaScript in WordPress was whether to add custom JavaScript codes to an existing file or create a new JavaScript file.

That sounds like I’m an amateur in retrospect, but we all have to start somewhere.

Indeed, most of the problems you have, as a learner of any subject, have been encountered by thousands of people before you.

If you have this question, you are not alone.

The right answer is:

• Create a new JavaScript file containing your custom codes.
• Save it with a unique name.
• Add it to the .js folder of your child theme.

WordPress is shaping itself as a lego set, so don’t mess with existing files if possible.

A simple JavaScript code snippet to sticky my sign-up form.

Step 3: Enqueue JavaScript Files in functions.php

Modifying your WordPress files is a nerve-wracking experience, but it is even more so with the functions.php file.

Get Trang Le’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

This unforgiving file acts like a WordPress plugin that adds more functionality to your site. In fact, you can even make small plugins inside this file.

Let’s see how we can enqueue our freshly made JavaScript file. Below is my code for enqueuing my custom JavaScript to WordPress.

function popper_enqueue_styles() {
wp_enqueue_script( 'custom', get_stylesheet_directory_uri() . '/js/custom.js', array(), '', true );
}

Let me explain what the above code means.

• wp_enqueue_script is a function that registers your JavaScript file.
• ‘custom’ is the value for the $handle value, which is simply the name of the script file.
• get_stylesheet_directory_uri() . ‘/js/custom.js’ provides the location of the JavaScript. get_stylesheet_directory_uri() is a function that retrieves the directory of the current theme, or child theme in this case. The whole code tells WordPress to look for the JavaScript file named custom.js in the wp-content/themes/theme’s name/js directory.
• array() is the default value for the $deps parameter, which specifies dependencies that your script depends on. For example, if your script requires jQuery, $deps will become array(‘jQuery’).
• ‘’ is the value for the $ver parameter, which specifies the script version number. By leaving an empty string, I’m telling WordPress to auto-generate the version number.
• true is the value of the $in_footer parameter, which is a boolean value. If true, the script will be enqueued before the closing </body> tag. If false, it will be enqueued between the opening <head> and </head> tags.

You can also check out this article on how wp_enque works from Torque Mag.

Step 4: Check If the Javascript File Added Correctly

Technically, you have finished adding JavaScript to WordPress. But how do you know if it has been enqueued correctly?

Right-click anywhere on the page and choose Inspect elements.

In your browser developer tool, click on the Debugger tab. You should see your new JavaScript file under the wp-content/themes/your theme name/js directory.

By the way, this tells you that the JavaScript file has been incorporated into your site, but how do you know if it’s in the <head> or <body> section?

To do that, right-click the page and choose View page source.

Hit CMD+F or CTRL+F to bring up the search box.

Enter “your theme’s name/js”. In my case, the search term is popper-child/js.

You can see my tiny custom JavaScript among a minefield of scripts that I use on my site.

Summary

If you are looking for a safe way to add JavaScript to WordPress, here’s a summary:

1. Create a new JavaScript file and add it to the js folder of your theme.
2. Enqueue the scripts using the wp_enqueue_scripts function.
3. Use the Firefox or Chrome developer tools to check if it has been enqueued successfully and in the right place.

Now you are good to go. It is embarrassing to admit but I took several hours to figure out how to do this the right way.

How about you? How long did it take you to add JavaScript to WordPress? And which cool features have you added to your site with custom JavaScript?