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');
}

6 thoughts on “Always Enqueue Your Scripts & Fonts

  1. Barbara says:

    Heya, I was wanting to know if blogs use WYSIWYG editors or if you have to manually code with HTML. I’m starting a blog soon but have no coding skills so I wanted to get advice from someone with experience. Any help would be enormously appreciated!

    1. Brett Hoffman says:

      There are a ton of ready-made themes for WordPress you can use with minimal understanding of HTML. WordPress in particular has both a visual WYSIWYG editor for posts and pages as well as a text editor for use if you ever need to write basic HTML markup.

  2. Izetta says:

    Hey there! I just wanted to ask if you ever have any issues with hackers? My last blog (wordpress) was hacked and I ended up losing maybe months of hard work due to no backup. Do you have any solutions to prevent hackers?

    1. Brett Hoffman says:

      The number one way to fight hackers is to keep your theme, plugins, and WP core up-to-date as often as possible, in addition to preventative security measures. I’d recommend using a well-known security plugin like iThemes Security which will walk you through securing your WordPress site in a number of ways. It’s also good to keep up-to-date on the latest security vulnerabilities by either following security blogs or signing up for their mailing lists.

      Backups are (obviously) absolutely critical to website security. Not only from automated hacker scripts, but also for protection from updates potentially breaking your site. This includes both filesystem backups (media & theme files) as well as database backups; either could be corrupted in the cases stated above.

  3. Leslie says:

    Greetings from Ohio! I’m bored at work so I decided to check out your blog on my iphone during lunch break. I’m shocked at how fast your blog loaded on my cell phone. I’m not even using WIFI, just 3G… Anyhow, wonderful site!

  4. Michael says:

    Hello, would you mind stating which blog platform you’re working with? I’m planning to start my own blog in the near future but I’m having a difficult time making a decision between BlogEngine/Wordpress/B2evolution and Drupal. The reason I ask is because your design and style seems different then most blogs and I’m looking for something unique.

    P.S My apologies for getting off-topic but I had to ask!

Leave a Reply

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

Continue Reading