How to Load JavaScripts into WordPress Themes

JQuery and other JavaScript frameworks are very commonly used in WordPress themes and plugins, but not all developers load them correctly. You find many themes and plugins that load these frameworks directly using code like this:

This is not the correct way to load scripts, as you might end up with more than one loaded version of JQuery, causing conflicts. WordPress has an inbuilt function called wp_enqueue_script which can be used to load scripts such as JQuery.

Using a straightforward piece of code as follows will load the JQuery library that ships with WordPress:

This line could be placed in the theme’s header.php or functions.php file.

Note: If you’re loading directly into your header.php template file, make surethat the wp_enqueue_script function is above your wp_head function.Your custom jQuery code must go below the wp_head function. If you’re registering the wp_enqueue_script in the functions.php file, make sure that it comes before any custom functions that load throughthe add_filter function into the wp_head.

At this point the problem has been solved, but let’s go one better and load the JQuery framework hosted on Google’s CDN rather than the one which ships with your WP installation. Why would we do this? The CDN saves on bandwidth, allowing your site to do some parallel processing while downloading other scripts and collateral. Plus, it’s easy to always get the most current version of jQuery. jQuery’s library loads very quickly from Google’s CDN and, as a bonus, the library will already be cached if your site’s user has previously visited another site that delivers jQuery from Google Code’s CDN. To include jQuery from Google Code’s CDN, we’ll be sure to deregister jQuery then register through Google’s CDN. This is the beauty of registering and using the wp_enqueue_script function: if any other plugin or script requires jQuery, and doesn’t have any conflicts with the version loading up from Google, that script will use the already loaded Google CDN library. If a script depends on a specific version of jQuery, say 1.3.2 or 1.2.6, and the CDN is loading up version 1.4.2, then that script will go ahead and load the version of jQuery it requires. Because (as we’ll learn) every script loaded through the Script API stays in noConflict mode, it’s OK to have the two library versions loaded as long as they’re registered and required.

The code below (inserted into functions.php) deregisters the default JQuery library that comes with WordPress, and registers the CDN hosted version at Google. We also put in an if statement that makes sure Google CDN jQuery is not called on admin pages, as this may cause problems when editing posts, pages, or links.

Therefore the code directly above is all you need to insert in order to have JQuery loaded and available to use in your themes and plugins.

About Jean Galea

Jean Galea is a WordPress developer, entrepreneur and padel player. He is the founder of WP Mayor, the plugins WP RSS Aggregator and EDD Bookings, as well as the Mastermind.fm podcast. His personal blog can be found at jeangalea.com.

Related Articles

  • Top DamnLOL WordPress Clone Themes

    Lets take a look at some of the best DamnLOL clone themes for WordPress.

  • Top 9Gag WordPress Clone Themes

    WPGag WPGAG can let you build your own Content Sharing sites in minutes. Driven by 9gag.com, it comes with top features like user registration, content upload, profiles, and much more!…

  • Building a site for your wedding is a great way to keep a record of your special day and the build up to it, or even to share photos with…

2 Responses

  1. chad
    chad February 13, 2012 at 14:39 | | Reply

    Thanks Jean… I now use this method but I have an issue loading the jquery UI libary for some of my custom pages. The only way I was able make the UI work is loading the UI script in the header.php file outside of the WP_head(); . Any suggestions on why this is?

Leave a Reply