Looking for something?

How to correctly enqueue stylesheets and script files in WordPress

For many years, the way I linked to external stylesheets in WordPress was incorrect.

When you learn about CSS and external stylesheets you are taught to link to them using a link tag like this:

<link rel="stylesheet" type="text/css" href="style.css">

However in WordPress the correct way to link to stylesheets is to enqueue them within the functions.php file of your theme. The same applies to script files such as .js files.

If you aren’t familiar with the term “enqueue” it basically means to add data that is awaiting processing into a queue. So with our stylesheets and script files in WordPress, we are adding them to a queue and waiting for the correct moment to use them.

I know this might sound complicated and it certainly confused me at first, but it will become second nature to you soon.

In this post I’ll show you how to correctly enqueue stylesheets and script files in WordPress.


How to enqueue the main style.css stylesheet

Firstly, let’s look at how to enqueue the main stylesheet of a WordPress theme: style.css.

We will begin by creating a PHP function in our functions.php file. You need to make sure you are editing inbetween the opening and closing PHP tags (<?php … ?>).

You can call this function whatever you like. I’m going to call mine mytheme_files:

function mytheme_files() {

}

Then we will call a WordPress function called wp_enqueue_style(). This is what we use to enqueue a CSS stylesheet.

function mytheme_files() {
    wp_enqueue_style();
}

Now, we are going to use two parameter in this function. The first parameter is the name of the stylesheet. I’m going to call mine mytheme_main_style. We place this in between the brackets and place this within single quotation marks.

function mytheme_files() { 
    wp_enqueue_style('mytheme_main_style'); 
}

For the second parameter were going to use the WordPress function get_stylesheet_uri(). This function gets the URI of the main stylesheet (i.e style.css) for the current theme.

We need to separate this parameter from the previous parameter with a comma, and we don’t need to place this within quotation marks.

function mytheme_files() {
    wp_enqueue_style('mytheme_main_style', get_stylesheet_uri());
}

So we’ve created our function, but our function won’t run until it’s called. To call our function we will use the WordPress function add_action(). This is placed outside of the function we have just created:

function mytheme_files() { 
    wp_enqueue_style('mytheme_main_style', get_stylesheet_uri()); 
}

add_action();

We are going to use two parameters within this function. The first parameter tells WordPress when to call the function, and for this we are going to use wp_enqueue_scripts. Again, we need to place this within the brackets and within single quotation marks.

function mytheme_files() {
    wp_enqueue_style('mytheme_main_style', get_stylesheet_uri());
}

add_action('wp_enqueue_scripts');

The second parameter tells WordPress which function to call. So, add a comma after the previous parameter and in single quotation marks, type in the name of the function we have created to enqueue our scripts. Remember, mine is called mytheme_files.

function mytheme_files() { 
    wp_enqueue_style('mytheme_main_style', get_stylesheet_uri()); 
} 

add_action('wp_enqueue_scripts', 'mytheme_files');

And that it! That’s how we enqueue the style.css of a theme. Try this out and see if your style.css file is called in correctly.

But how do you enqueue a stylesheet that isn’t the main style.css file? Afterall, you may choose to use multiple stylesheets for a theme.

How to enqueue other stylesheets

So we know how to call in the main stylesheet of a WordPress theme, but what happens if you have other stylesheets with your theme files that you need to enqueue? For example, you might have a stylesheet that contains all the styling for mobile devices.

Well, we use a very similar method of enqueuing. We just need to change some parameters.

Instead of using get_stylesheet_uri() we will use get_theme_file_uri() function which gets the the URL of a file in the theme.

So let’s pretend we have a stylesheet in our theme folder called mobile.css. We can enqueue this stylesheet in the same function that we enqueued the main stylesheet in, so underneath our first wp_enqueue_style function, let’s add another one for our mobile.css file.

function mytheme_files() { 
    wp_enqueue_style('mytheme_main_style', get_stylesheet_uri()); 
    wp_enqueue_style(); 
} 

add_action('wp_enqueue_scripts', 'mytheme_files');

Again, give this stylesheet a name and make sure the name is in single quotation marks. I’m going to call mine mytheme_mobile_style.

function mytheme_files() { 
    wp_enqueue_style('mytheme_main_style', get_stylesheet_uri()); 
    wp_enqueue_style('mytheme_mobile_style'); 
} 

add_action('wp_enqueue_scripts', 'mytheme_files');

Then let’s add in our get_theme_file_uri() function:

function mytheme_files() { 
    wp_enqueue_style('mytheme_main_style', get_stylesheet_uri()); 
    wp_enqueue_style('mytheme_mobile_style', get_theme_file_uri()); 
} 

add_action('wp_enqueue_scripts', 'mytheme_files');

Now, to call in our stylesheet, we need to put the file name of this stylesheet in between the brackets like so:

function mytheme_files() { 
    wp_enqueue_style('mytheme_main_style', get_stylesheet_uri()); 
    wp_enqueue_style('mytheme_mobile_style', get_theme_file_uri('mobile.css'));
} 
add_action('wp_enqueue_scripts', 'mytheme_files');

If the stylesheet is in a folder within the theme files then you will need to include this folder name too. For example, your stylesheet might be in a folder called css, so this is how you would enqueue that file:

function mytheme_files() { 
    wp_enqueue_style('mytheme_main_style', get_stylesheet_uri()); 
    wp_enqueue_style('mytheme_mobile_style', get_theme_file_uri('css/mobile.css')); 
} 

add_action('wp_enqueue_scripts', 'mytheme_files');

And that’s how we enqueue a stylesheet that isn’t the main stylesheet of a theme. Make sure you test this to make sure it works!

How to enqueue stylesheets from external websites

Sometimes you will want to enqueue stylesheets from external websites, for example if you use Font Awesome or Google Fonts. To do this, we can use the wp_enqueue_style() function again in the functions.php.

Again, the first parameter will be the name of your file, but the second parameter will be the URL of the stylesheet just with the http: or https: removed from it.

So let’s look at an example. I want to enqueue a stylesheet from Google Fonts for the Roboto font. The stylesheet URL I am given is https://fonts.googleapis.com/css?family=Roboto. This is what it would look like in my functions.php file:

function mytheme_files() { 
    wp_enqueue_style('mytheme_font', '//fonts.googleapis.com/css?family=Roboto'); 
} 

add_action('wp_enqueue_scripts', 'mytheme_files');

How to enqueue script files

Enqueuing a script file, such as a JavaScript file, is very similar to enqueuing a stylesheet in WordPress.

Instead of using the wp_enqueue_style() function we use the wp_enqueue_script() function. So let’s take a look at this in more detail

Start by creating a new function in your functions.php. Or if you have already set up a function to enqueue your stylesheets you can place your wp_enqueue_script() function within that.

function mytheme_files() { 

}

Now we will place out wp_enqueue_script() function inside this function:

function mytheme_files() { 
    wp_enqueue_script(); 
}

add_action('wp_enqueue_scripts', 'mytheme_files');
wp_enqueue_script( 'script', get_theme_file_uri('/js/script.js'), NULL, '1.0', true);

Now we are going to use a number of parameters within this function. The first parameter is going to be a name for your script file. I’m going to call mine mytheme_script

function mytheme_files() { 
    wp_enqueue_script('mytheme_script'); 
}

add_action('wp_enqueue_scripts', 'mytheme_files');

Then for the second parameter we are going to use the get_theme_file_uri() function that we used when we enqueued our stylesheets.

function mytheme_files() { 
    wp_enqueue_script('mytheme_script', get_theme_file_uri()); 
}

add_action('wp_enqueue_scripts', 'mytheme_files');

Within the brackets in this function we are going to type in the file name of the script file we want to enqueue. And remember, if the script file is in a folder, include this too.

In this example, my script file is called script.js so it would look like this:

function mytheme_files() { 
    wp_enqueue_script('mytheme_script', get_theme_file_uri('script.js')); 
}

add_action('wp_enqueue_scripts', 'mytheme_files');

And if my script was in a folder called js, it would look like this:

function mytheme_files() { 
    wp_enqueue_script('mytheme_script', get_theme_file_uri('js/script.js')); 
} 

add_action('wp_enqueue_scripts', 'mytheme_files');

Ok, we aren’t finished just yet! Two parameters were enough to enqueue a stylesheet but we add in a few more parameters before our scripts are enqueued.

The next parameter we are going to add in is an array. This array handles any script that your script file depends on, such as jQuery. You can leave this blank if your script file doesn’t depend on any scripts.

function mytheme_files() { 
    wp_enqueue_script('mytheme_script', get_theme_file_uri('js/script.js'), array()); 
} 

add_action('wp_enqueue_scripts', 'mytheme_files');

After this, we are going to add in a version number. This can be anything you want but I’m just going to use 1.0.

function mytheme_files() { 
    wp_enqueue_script('mytheme_script', get_theme_file_uri('js/script.js'), array(), '1.0'); 
} 

add_action('wp_enqueue_scripts', 'mytheme_files');

The final parameter we are going to add in is a boolean parameter (which means you can either enter true or false) that allows you to choose where your script sits into your HTML document. So if you enter true your scripts will be loaded through wp_footer() and if you enter false they will be loaded through wp_head().

As this is a boolean parameter, you do not need to put it in quotation marks.

function mytheme_files() { 
    wp_enqueue_script('mytheme_script', get_theme_file_uri('js/script.js'), array(), '1.0', true); 
} 

add_action('wp_enqueue_scripts', 'mytheme_files');

And that’s how we enqueue a script file. Don’t forget to test this to make sure it works!


Have you been enqueuing stylesheets and scripts correctly in WordPress?

How to correctly enqueue stylesheets and script files in WordPress | HollyPryce.com

Leave a comment

Comment

* = Required. Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.