Loading JavaScripts with WordPress

Over the last few weeks I’ve written about using jQuery with your WordPress site. At the time I wrote saying to load jQuery use a script tag. During this past week Gary brought the WordPress function wp_enqueue_script() to my attention.

The wp_enqueue_script() tag allows you to inform WordPress which JavaScripts to load much more efficiently.

Register a Script

If you want to use one of your own scripts ie. a script not already available within WordPress, then you need to register the script, which can be done using the same tag. You can also tell WordPress if another script is required to be loaded at the same time eg. a couple of weeks ago I wrote about how to add some simple show/hide effects with jQuery. We can take the jQuery statements that we wrote, and put them into an external file called header.js (for example). We then can register this with WordPress in the header.php theme file by using

<?php wp_enqueue_script('jheader', '/wp-content/themes/js/header.js', array('jquery')); ?>

The above has 3 parameters. The first is a name I’ve made up as a short name for the script, the second parameter is the path to where I’ve put my script file and the third is a call for jQuery to also be loaded for this script. This line of code needs to go above the wp_head() template tag, as that will check for registered or queued scripts and output the script calls.

The wp_enqueue_script() function can also take a 4th parameter which is a version number if you require a specific version of the script to load.

Loading Default Scripts

As we already know, WordPress comes with a number of scripts available such as jQuery and Thickbox. To make life even easier, WordPress already has already registered these scripts so to call just jQuery on its own you can use

<?php wp_enqueue_script('jquery'); ?>

To see a full list of scripts available, you can view them in the WordPress Codex on the wp_enqueue_script page.

The Benefits

The benefits of using this function means that you don’t need to go searching for a pre-registered script’s location. At present jQuery is stored under /wp-includes/js/jquery/jquery.js however in the next release it could be elsewhere. By just saying ‘load jQuery’ WordPress will know where the file is stored and the correct path to it.

Another benefit is that if you load jQuery for your own use, and then one of your plugins also loads jQuery (using the same function), WordPress will only output one script call, whereas if you hardcode the script call in your header, and your plugin loads jQuery either by a script tag or using the function, you will get two script tags calling the same file.