You can make your Wordpress website 10 times coolers with additional Javascript, without nightmare of breaking it.

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

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

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

The traditional way to add Javascript

In HTML, Javascript codes are inserted between <script> and </script> tag.

So how about WordPress, where each page is loaded using a different PHP file according to the WordPress template hierarchy? Let’s go back to the unsexy fundamentals of WordPress.

The right way to add Javascript to WordPress

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, consists of many files, ranging from PHP, Javascript, to CSS.

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

Step 1: Create a child theme

You may be asking: Why bother to make a child theme instead of diving in right away?

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

Another reason is that creating a child theme takes about 5 minutes. If you have taken the trouble of adding Javascript to your WordPress site, why not spending another 5 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

This is a question I had when I started to tinkle with Javascript in WordPress: to add custom Javascript codes to an existing file, or to create a new Javascript file?

That sounds amateur in retrospect, but we all start from 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, then you are not alone.

The right answer is: Create a new Javascript file containing your custom codes.

WordPress is shaping itself as a lego set, so don’t mess with existing files if possible. Make a new file, save it with .js extension, and add it to the js folder of your theme.

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.

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

Without further ado, 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.
  • 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 paremeter, which is a boolen 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 awesome article on how wp_enque works from Torque Mag.

Step 4: Checking if the Javascript file has been 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.

Javascript to WordPress—Debugger

By the way, that 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”.

Javascript to WordPress—View page source

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

Recap—How to Add Javascript to WordPress the right way

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

  • create a new Javascript file and add it to the js folder of your theme.
  • enqueue the scripts using the wp_enqueue_scripts function.
  • use Firefox or Chrome developer tool to check if it has been enqueued successfully, and at the right place.

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

How about you? How long did it take you to add Javascript to WordPress? And what cool features have you added to your site with custom Javascript? Please share your story in the comment section below.

Stay inspired. Subscribe to my infrequent newsletters.(You won't regret it).

Leave a Reply

Your email address will not be published. Required fields are marked *