How to enqueue scripts and style sheets in WordPress

If you read my WordPress posts you will often see me ask you to enqueue a script or style sheet. This is bread and butter for WordPress theme and plugin development. It is how we call JavaScript scripts and CSS style sheets into our WordPress applications so you will need to know this for every theme you create, and the vast majority of plugins, too.

Don’t worry if you are unsure about how to do this, I’m going to show you.

Making the function

Resources are enqueued through your theme or plugin functions.php file.  We start by writing a function to handle our enqueues as a group.

function gb_scripts() {

}

We then call the script through an action with a low priority. This will cause it to load further down the page.

function gb_scripts() {

}

add_action('wp_enqueue_scripts', 'gb_scripts', 999);

Enqueue the files

Style sheets

Now that we have a function ready we can start by enqueuing a style sheet. We do this using the wp_enqueue_style() function. Here is how I call the main style sheet for Gav’s Blog.

wp_enqueue_style('gb-css', get_template_directory_uri() . '/css/style.min.css', array(), '', 'all');

Let’s break this down a bit:

• ‘gb-css’ is my handle. This is the unique identifier for the style sheet.
• The next parameter is the location of the style sheet I’m trying to enqueue. I’m using get_template_directory_uri() to retrieve the theme directory uri and adding the path to the file manually.
• Next I’m passing an empty array to show that there are no dependencies for this style sheet. This could contain the names of other style sheets required by the one I’m enqueuing.
• Then we have an empty string. This is the version number of the style sheet. I don’t want to add a version number so I’m passing an empty string.
• Finally we pass our media conditions. For example, I could pass a max width or orientation declaration here, but my style sheet is written to apply to all.

Scripts

Enqueuing scripts work roughly the same way as enqueuing style sheets. We use the wp_enqueue_script() function for this.

wp_enqueue_script('gb-js', get_template_directory_uri() . '/js/scripts.js', array( 'jquery' ), '', true);

Here is the code breakdown:

• ‘gb-js’ is my handle, just like with the style sheet. Again, this should be unique.
• Next we have the script location. As you can see, I’ve declared my location using the same format as the style sheet.
• This time my dependencies array is populated with ‘jquery’. This means that my script has a dependency on jQuery and should be loaded after the jQuery script.
• I don’t set a version string, again.
• Finally, I’m passing a conditional variable to say that I would like the script to be loaded in the footer rather than the head. I do this to prevent render blocking.

A basic theme enqueue function will look something like this:

Note: I’ve included a Google Fonts enqueue, too.

function gb_scripts() {   
    // Adding scripts file in the footer
    wp_enqueue_script('gb-js', get_template_directory_uri() . '/js/scripts.js', array( 'jquery' ), '', true);

    // Register main stylesheet
    wp_enqueue_style('gb-css', get_template_directory_uri() . '/css/style.min.css', array(), '', 'all');

    // Register Open Sans Google Fonts
    wp_enqueue_style('open-sans-google-font', 'https://fonts.googleapis.com/css?family=Open+Sans', false);
}

add_action('wp_enqueue_scripts', 'gb_scripts', 999);

Conditional Enqueue

Sometimes you might like to include a resource on a specific post or template. For me I find this useful when I only need a resource for a specific article.

A good example of where everybody might be using this can be seen on my comments guide.

if (is_singular() && comments_open() && (get_option('thread_comments') == 1)) {
    wp_enqueue_script('comment-reply', 'wp-includes/js/comment-reply', array(), false, true);
}

As you can see, I wrap the enqueue in an if statement so that my comment-reply script is only used when we are viewing a post (singular), the comments are open and when threaded comments are enabled.