Always Enqueue Your Scripts & Fonts

We’ve all seen it enough in the wild, scripts being listed directly in a WordPress theme’s footer.php file. While you’re not necessarily wrong doing it this way, it is certainly not the best method of dropping in additional functionality while making sure WordPress is aware of everything it should be doing. Doing it this way has the potential to break and/or cause other issues if a theme is trying to use a Javascript library other jQuery; something like MooTools for instance.

The first and perhaps most frequently used example of registering a new script would be jQuery, as many times people feel the need to just override the version that WordPress already includes. As we all know, jQuery is an ever evolving beast with new versions potentially breaking older scripts in a blink of an eye; for this reason it is sometimes easier to utilize an older version to ensure a site functions as it should, at least until your scripts can all be updated to be compatible with newer versions.

The other huge reason to override the built-in jQuery (or any other script you need) would be to take advantage of Google’s Hosted Library. By using Google as a host for these files it allows you a potential speed boost, as many others do the exact same thing, and thus, your browser may already have a cached version of on your computer. This would apply to any other moderately known CDN/hosting library you’d use as well.

Proper Handling

Registering (or De-Registering) Scripts

Let’s start off with our jQuery override example mentioned above. The WordPress Codex can handle the heavy lifting if you have more questions, but the basics you’ll need to know about enqueueing your scripts are as follows:

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

In order if appearance:

• $handle – This is the name or “handle” you give your script. This can be just about anything you’d like and will be used to reference the script in question.
• $src – The source/location of the script in question, whether within a plugin’s directory, your theme’s script folder or off-site on a hosted libraries.
• $deps – This lists any other script dependencies the script relies upon. For most this will be jQuery, but if you have a main scripts.js file that holds custom code, you’ll likely want to list this as well. This helps WordPress know which scripts it should load first. If there are no dependencies, this should be set to false.
• $ver – The is the script version number. This can be set based on the plugin’s version, or can be set to false, which will append your current WordPress version number to the file name, or NULL which means nothing will be appended to the file name.
• $in_footer – Should this script be loaded in the footer rather than the header? In almost all cases this should be set to true, but if there’s some particularly troublesome scripts that should be loaded in the wp_head, set it to false.

An example of what this might look like in action*:

wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js', false, '1.8.3', true);

(* Note the the lack of protocol (http: or https:) in front of the referenced script. This is another conversation in itself; just know this is the best approach to ensure scripts are loaded regardless of whether your site uses secure connection or not.)

Function, Function, What’s Your Function?

The next thing to do is create a function inside of the functions.php, located in your theme’s root directory, to house your script registrations.

Since we’re not attempting to load scripts into the admin area, you’ll want to do an if case to ensure you’re only adding them on the front-end of the site (line #2 below):

function load_your_scripts() {
        if ( !is_admin() ) {
            // your script registrations go here
        }    
}
add_action('wp_enqueue_scripts', 'load_your_scripts');

Keeping with safe practices, you’ll want to check that your load_your_scripts function exists as well:

if( !function_exists( 'load_your_scripts' )) {
    function load_your_scripts() {
        if ( !is_admin() ) {
            // your script registrations go here
        }
    }
    add_action('wp_enqueue_scripts', 'load_your_scripts');
}

Override WordPress’ Included Version

Now that we have all the pieces of the puzzle, in our example we are not only trying to register the ‘jquery’ handle script to point at the Google-hosted version, but we also have to take into account that WordPress has already registered their included jQuery version under the ‘jquery’ handle.

Given that, we’ll need to first de-register their version before registering our new one under the same handle. This should be done before your wp_register_script for the Google-hosted version:

wp_deregister_script('jquery');

…And so finally, we have our assembled script override and new registration!

if( !function_exists( 'load_your_scripts' )) {
    function load_your_scripts() {
        if ( !is_admin() ) {
            wp_deregister_script('jquery');
            wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js', false, '1.8.3', true);
            wp_enqueue_script('jquery');
        }
    }
    add_action('wp_enqueue_scripts', 'load_your_scripts');
}