Journal »

WordPress: Enqueue Your Scripts (& Fonts), Man

“There’s more than one way to skin a cat” as the old idiom says, but this one has nothing to do with the internet’s favorite furry friends. I’m talking about properly enqueueing your Wordpress scripts and favorite web fonts by utilizing the ever helpful wp_enqueue_scripts instead of becoming the barbarian who loads everything inline.

Overview

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 you will need to 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 often easier to utilize an older version to ensure your site functions as it should, at least until your scripts can 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'); } 

7 comments on “WordPress: Enqueue Your Scripts (& Fonts), Man

    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!


      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.


    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?


      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.


    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 enjoy the knowledge you present here and can’t wait to take a look when I get home. I’m shocked at how fast your blog loaded on my cell phone. I’m not even using WIFI, just 3G… Anyhow, wonderful site!


    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!


    elliot  says...

    Hi there would you mind letting me know which webhost you’re working with?
    I’ve loaded your blog in 3 completely different web browsers and I must say this blog loads a lot quicker then most.

    Can you recommend a good web hosting provider at a honest
    price? Thanks a lot, I appreciate it!


Leave a Reply

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