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.


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', '', 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.

Join the discussion!

You might like:

Create, register and use shortcodes in WordPress

Create, register and use shortcodes in WordPress

by Gav 18/03/2023

Learn how to create and register your own WordPress shortcodes to add dynamic content to your posts and pages.

How to use guard clauses in JavaScript

How to/why use guard clauses in JavaScript

by Gav 16/03/2023

Learn how to improve code readability and performance by using guard clauses in JavaScript. Discover their benefits and best practices.

Implements and Extends, Object Oriented TypeScript

Implements and Extends, Object Oriented TypeScript

by Gav 15/03/2023

Learn the difference between implements and extends in TypeScript. Use Implements to implement interfaces and types, and extends to inherit from classes.

Reading/Parsing and Writing YAML files in PHP, Symfony

Reading/Parsing and Writing YAML files, PHP Symfony

by Gav 14/03/2023

In this tutorial we will look at using YAML in PHP. Learn about Parsing and Writing YAML files using Symfony's YAML component.

Measuring code execution performance in JavaScript

Measuring code execution performance in JavaScript

by Gav 13/03/2023

Measuring code execution performance is an important way to identify bottlenecks. Use these methods in JavaScript to help optimise your code.

Measuring script/code execution time in PHP using microtime

Measuring script/code execution time in PHP, microtime

by Gav 06/03/2023

Find bottlenecks, optimise and clean your code, and speed up your apps by measuring the execution time of your PHP scripts using microtime.

Regenerate WordPress media image sizes, programmatically

Regenerate WordPress media image sizes, programmatically

by Gav 25/02/2021

Learn how to regenerate and update WordPress media and image sizes both programmatically (without plugin), and also with a handy plugin.

Magic Constants in PHP. What they are and how to use them.

Magic Constants in PHP. What they are and how to use them

by Gav 15/02/2021

Ever seen constants like __DIR__ and __FILE__ being used in PHP? These are 'Magic Constants', and this is how we can use them.

Detecting Keypress JavaScript

Detect single and multiple keypress events: JavaScript

by Gav 16/10/2019

Learn how to use event listeners to detect and handle single and multiple keypress events in JavaScript. Add modifier keys to your application!