How to Load Styles and Scripts the WordPress Way

Posted OnSep 12, 2014     CategoryDevelopment     CommentsNo comment

There are a few ways you could go about loading scripts and styles into your theme, but they’re not all the right way. This guide will explain how to load styles and scripts correctly by using hooksthe WordPress way. It will explain the benefits of loading your resources the right way and go over the differences between registering your resources or enqueuing them. Providing examples of the functions you can, and should, use within your theme.

The WordPress Way

When it comes to loading styles and scripts, WordPress has pre-built methods and functions for you to utilise. It would be a shame not to. Doing things the WordPress way will make your work less confusing for collaborators as well as more compatible with other plugins and themes.

Getting a Grip on The Basics

All the functions in this guide accept quite a few parameters which are explained in full on the codex links below. They’ll also need to hook into WordPress properly. Here are a few things you should know before you start:

Dependencies: These are really important. Make sure you set dependencies so that your resources will load in the right order. If you forget to do this, you’ll find styles won’t overwrite like you expected or jQuery plugins will be loaded before jQuery and won’t work at all.

Version Strings: These are optional but it is good practice to add a version string for each of your scripts and styles. The string you set is added to the end of your path when loaded and helps with browser caching. If you set a new version string each time you publish changes to your resource this helps to ensure your visitors browser re-loads the script instead of using cached resources. Whether your updates are big or small, this step is important if you want to make sure all your visitors are seeing the same working version of your site. Theme version numbers, dates or commit references make good version strings.

Placement: Any script files you load using the method below will be output by wp_head() by default. You can set the $in_footer parameter to true to change this and have them output by wp_footer() instead. This is generally considered best practice for lots of scripts and helps towards establishing optimum performance for your site.

Hooks: All your functions will need to hook into WordPress actions in order to work properly. This step is very important. If you don’t hook up your functions correctly then your scripts and styles won’t load as you expect.

Registering Scripts and Styles in WordPress

By using the wp_register_script() and wp_register_style() functions, you can safely register your JS and CSS files for later use. Once you have registered your resource it can be enqueued simply by referencing the handle you have given it, or by listing it as a dependancy. Dependencies can be set when registering a resource as well as when enqueuing it.

How to Register a Script

First create a function in your theme’s functions.php to contain all your registered scripts.

function yourtheme_register_scripts() {
}

It is always a good idea to use your theme name in front of function names to make sure there are no naming conflicts with other themes and plugins you might be using.

Next, register your script using the wp_register_script() function and adjusting your parameters as required. Parameters accepted, in order, are: $handle, $src, $deps, $ver, $in_footer. Example:

function yourtheme_register_scripts() {
wp_register_script( 'your-script-handle', get_template_directory_uri() . 'js/your-script.js', false, 'version-string', 'false' );
}

Replace ‘your-script-handle’ with whatever you like, making sure the path to your script is correct. List dependencies using an array or set to false if there are none. Add an optional version string. Set the last parameter to false if your script should load in the head, or true if you want it to load in the footer.

Here’s an example with dependencies, where the script requires jQuery and is loaded at the foot of your site:

function yourtheme_register_scripts() {
  wp_register_script( 'your-script-handle', get_template_directory_uri() . 'js/your-script.js', array( 'jquery' ), 'version-string', 'true' );
}

jQuery is already registered within WordPress and can be referenced using it’s handle ‘jquery’. Wherever possible it is a good idea to use the jQuery version that ships with WordPress to maintain compatibility with other active scripts and plugins.

Once your script is registered, hook your function into the right WordPress action:

add_action( 'wp_enqueue_scripts', 'yourtheme_register_scripts' );

 

How to Register a Style

Registering styles works in much the same way. It’s important to use the right function to register styles separately from scripts so that they can be output correctly by WordPress.

function yourtheme_register_styles() {
  wp_register_style( 'your-style-handle', get_template_directory_uri() . '/style.css', false, 'version-string' );
}

The parameters accepted are $handle, $src, $deps and $ver. Again, you should replace ‘your-style-handle’ with your own handle, set dependencies to false where there are no dependencies and replace ‘version-string’ with something of your choice (eg: a theme version number or date of last modification).

Here’s an example that uses dependencies to easily include WordPress Dashicons in your theme. Whenever your style is enqueued, this will make sure the Dashicons style sheet is loaded before yours.

function yourtheme_register_styles() {
  wp_register_style( 'your-style-handle', get_template_directory_uri() . '/style.css', array('dashicons'), 'version-string' );
}

Registered styles are hooked into the same WordPress action as registered scripts. For example:

add_action( 'wp_enqueue_scripts', 'yourtheme_register_styles' );

 

Enqueuing Styles and Scripts in Your Theme

Enqueuing your scripts or styles makes them available to the wp_head() or wp_footer() functions and ensures they are output correctly in the head or foot of your theme. It does not matter if your resource has been registered first. You can enqueue any script or style regardless using either the wp_enqueue_script() or wp_enqueue_style() functions. Once properly enqueued, you can still refer to that script via the handle you have chosen.

How to Enqueue Scripts

The parameters accepted are the same as with registering: $handle, $src, $deps, $ver, $in_footer. As is the action you need to hook into.

You can enqueue a script that has already been registered like this;

function yourtheme_enqueue_scripts() {
  wp_enqueue_script( 'your-script-handle' );
}
add_action( 'wp_enqueue_scripts', 'yourtheme_enqueue_scripts' );

Or enqueue a script that has not been registered like this;

function yourtheme_enqueue_scripts() {
  wp_enqueue_script( 'your-script-handle', get_template_directory_uri() . 'js/your-script.js', array( 'jquery' ), 'version-string', 'true' );
}
add_action( 'wp_enqueue_scripts', 'yourtheme_enqueue_scripts' );

How to Enqueue Styles

Again, the parameters accepted are the same as with registering: $handle$src$deps$ver. As is the action you need to hook into.

You can enqueue a style that has already been registered like this;

function yourtheme_enqueue_styles() {
  wp_enqueue_style( 'your-style-handle' );
}
add_action( 'wp_enqueue_scripts', 'yourtheme_enqueue_styles' );

Or enqueue a style that has not been registered like this;

function yourtheme_enqueue_styles() {
  wp_enqueue_style( 'your-style-handle', get_template_directory_uri() . '/style.css', array('dashicons'), 'version-string' );
}
add_action( 'wp_enqueue_scripts', 'yourtheme_enqueue_styles' );

You can also enqueue styles conditionally. To make a stylesheet load conditionally, first register or enqueue as normal. Then use the wp_style_add_data() function to mark the style as conditional and specify the browser version which it’s for. If you’re using conditional stylesheets for older versions of Internet Explorer, make sure you list your main stylesheet as a dependency so they are loaded in the right order.

function yourtheme_enqueue_styles() {
  wp_enqueue_style( 'your-ie8-style', get_template_directory_uri() . '/css/ie.css', array( 'your-style-handle' ), 'version-string' );
  wp_style_add_data( 'your-ie8-style', 'conditional', 'lt IE 9' );
}
add_action( 'wp_enqueue_scripts', 'yourtheme_enqueue_styles' );

 

Why Load Styles and Scripts This Way?

You might be wondering why you should go to all this trouble. If you’re just starting out with WordPress, you might think it seems easier to add the html you are used to into your header file. Here are some fantastic reasons for why you should load styles and scripts the right way;

  1. Your theme will be more user friendly. Users will expect to find your resources loaded in this way.
  2. You can have finer control over when particular styles and scripts are loaded.
  3. Your theme will be more compatible with other themes and plugins.

If a parent theme or plugin has registered their scripts and styles the right way, with handles, you have more control over how your theme works. You can manipulate the loading of resources within your themes functions.php – making sure in-line edits to other plugins and themes are not required to achieve your desired results. That way your site is at far less risk of breaking when it comes to updating your plugins or parent theme.

For Example, a user might want to;

  1. Conditionally load the script for a contact form plugin only on the contact page.
  2. Remove unnecessary stylesheets.
  3. Conditionally load a script from a parent theme.

Bearing all this in mind, it is a really good idea to load your styles and scripts the right way. Make your theme compatible and user-friendly by choosing the WordPress Way.

 

Leave a Reply

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

Send this to friend