If you’re a WordPress user, then you must be well informed about the whopping 33,000+ plugins and 2,600 themes that are available on WordPress.org. While these plugins can do a lot of things, often there is a dire need for including JavaScript that can enable a particular theme or plugin to do more tasks that suit the varying needs of different users. In this post, I’ll walk you through the reason behind the usage of JavaScript in themes or plugins and how to go about with the same using a handy technique.

Why exactly do we need to use JavaScript in themes or plugins?

There are situations when the default features available with WordPress themes or plugins aren’t enough. It is here that the significance of adding JavaScript into themes and/or plugins becomes a must. Since WordPress itself uses JavaScript, it isn’t difficult to add JavaScript code into a particular theme or plugin. The only problem is that if every WordPress developer choose to include JavaScript without considering key pointers, the resulting page would turn to be heavy and hence load very slowly.

Now, coming to the process of using JavaScript in WordPress themes or plugins

Step 1- Using the wp_enqueue_script() function

You need to use the function wp_enqueue_script() for inserting a Javascript into a WordPress theme or plugin. With this function, you’ll get the scripts added in the form of a queue into the header or footer of the WordPress theme. Here, you need to note that no scripts tag would get added into the middle of the web page. The wp_enqueue_script() function will require two parameters vix: name of the JavaScript and a URL to the same. For instance, in order to include a Javascript for a plugin, all you need to do is simply add the below line of code into your main file:

wp_enqueue_script('myscript', plugins_url( '/myscript .js', __FILE__ ));

Additionally, there is yet another parameter that’s required by the wp_enqueue_script() function and that’s called boolean. Setting the value of this parameter to ‘true’ will include the script in the footer and setting its value to ‘false’ will have the script included within the head tag.

Next, there is yet another parameter which allows you to indicate all the dependencies within your script. For instance, you can use this parameter in case the script requires the jQuery library:

wp_enqueue_script('myscript', plugins_url( '/myscript .js', __FILE__ ), array('jquery'));

Step 2- Use wp_register_script() function for indicating dependencies into an array

With the wp_register_script() function, you’ll be indicating the script’s name, its specific URL, its version number, its dependenices and whether it must be included into the footer or the header. Have a look at this line of code:

wp_register_script('myscript', plugins_url( '/myscript .js', __FILE__ ), array('jquery'), '1.0', true);

The wp_register_script() function won’t include your scripts and for the same you’ll have to use wp_enqueue_script() function. Here, you just need to indicate the name of your script as shown below:

wp_enqueue_script('myscript');

Step 3- Using wp_enqueue_script() function for enqueuing two scripts

The best thing about wp_enqueue_script() function is that it doesn’t include the same script for more than a single time. For instance, if there are two files which require jQuery, then while trying to enqueue two scripts with different names and same URL will have WordPress include the script only once. Have a look at this:

wp_enqueue_script('myscript', plugins_url( '/myscript .js', __FILE__ ), array('mylib'));

wp_enqueue_script('myscriptother', plugins_url( '/myscript .js', __FILE__ ));

However, here you need to pay attention to one important point. If you’re inclined on indicating the version number in one of the wp_enqueue_script() calls, then the script would be included twice; despite the version number remaining the same. Have a look at the below code snippets where the script file will be included twice:

wp_enqueue_script('myscript', plugins_url( '/myscript .js', __FILE__ ), array('mylib'), '1.0');

wp_enqueue_script('myscriptother', plugins_url( '/myscript .js', __FILE__ ), array(), '1.0');

So, as you found from the above description, the two functions viz: wp_enqueue_script() and wp_register_script() serve as the best means of managing dependencies. All you need to do is simply register the two and WordPress would look after the remaining tasks.

Avoiding enqueuing scripts everywhere

It is the wp_enqueue_script() function which ensure that your script isn’t included twice and has been appropriately included within the header or footer. There are situations when the displayed web page doesn’t even need your script. For instance, in case of adding a media button to your WordPress’ default content editor, the Javascript file is just required when the user is accessing the editor. Here, the script is actually useless and tends to make the web page heavier. So, each time you’re planning to include a script into any of your pages, it is advised to check as to when you want the script. Well, the answer for this can vary in accordance to the purpose that your scripts solves. Once you’re done with funding an answer to this question, opt for a suitable action from the wide list of actions available on the WordPress Codex. After this, go ahead with creating a new function that will be used for enqueuing script(s) into the main file of the WordPress plugin under focus or within the WordPress theme’s functions.php file. Have a look at the below code snippet:

function my_customadd_scripts() {

wp_enqueue_script('myscriptone', plugins_url( '/myscriptone .js', __FILE__ ), array('jquery'));

wp_enqueue_script('myscriptsecond', plugins_url( '/ myscriptsecond .js', __FILE__ ));

}

Now, run the above code when the action is being triggered as shown below:

add_action('the_right_action', 'my_customadd_scripts');

That’s it!

Conclusion

There are indeed multiple tools that allow you to include scripts in WordPress in a proper manner. The only thing that you ought to keep in mind is that you need to be sure as to when and/or where the scripts are needed within your WordPress theme or plugin. I hope my post would have answered most of your questions regarding the appropriate usage of Javascript in WordPress.

Guest Post By: Jack Calder is a highly skilled professional in Markupcloud Ltd – a PSD to WordPress conversion service firm. Jack has shared a great article above on how you can use a JavaScript in WordPress with extensive plugins and themes.