How to wp_enqueue_style?

In this tutorial, we're going to have a look at the right way to enqueue CSS into WordPress with wp_enqueue_style().

In this post, you'll learn the right way to load an entire CSS stylesheet into your theme. If you just want to add some CSS to your WordPress site without coding, check out our post on How to Add Custom CSS to Your WordPress Site.

Over the years, WordPress has grown its code in order to make it more and more flexible, and enqueueing CSS and JavaScript was a move in that direction. Our bad habits remained for a while, though. While knowing that WordPress introduced CSS and JavaScript enqueueing, we continued to add this code into our header.php files:

Or we added the code below into our functions.php files, thinking it was better:

In the cases above, WordPress can't determine whether the CSS files are loaded in the page or not. That might be an awful mistake!

If another plugin uses the same CSS file, it wouldn't be able to check if the CSS file has already been included in the page. Then the plugin loads the same file for a second time, resulting in duplicate code.

Luckily, WordPress has a pretty easy solution to problems like this: registering and enqueueing stylesheets.

As we said earlier, WordPress has grown a lot over the years, and we have to think about every single WordPress user in the world.

In addition to them, we also have to take thousands of WordPress plugins into account. But don't let these big numbers scare you: WordPress has pretty useful functions for us to properly load CSS styles into WordPress.

Let's have a look.

If you're going to load CSS stylesheets, you should register them first with the wp_register_style() function:

Here's an example of the wp_register_style() function:

Registering styles is kind of "optional" in WordPress. If you don't think your style is going to be used by any plugin or you're not going to use any code to load it again, you're free to enqueue the style without registering it. See how it's done below.

After registering our style file, we need to "enqueue" it to make it ready to load in our theme's  section.

We do this with the wp_enqueue_style() function:

The parameters are exactly the same with the wp_register_style() function, so there's no need to repeat them.

But as we said that the wp_register_style() function isn't mandatory, I should tell you that you can use wp_enqueue_style() in two different ways:

Keep in mind that if a plugin will need to find your stylesheet or you intend to load it in various parts in your theme, you should definitely register it first.

We can't just use the wp_enqueue_style() function anywhere in our theme—we need to use "actions". There are three actions we can use for various purposes:

Here are the examples for these three actions:

There are some very useful functions about CSS in WordPress: They allow us to print inline styles, check the enqueue state of our style files, add metadata for our style files, and deregister styles.

Let's have a look.

If your theme has options to customize the styling of the theme, you can use inline styling to print them with the wp_add_inline_style() function:

Quick and easy. Remember, though: You have to use the same handle name with the stylesheet you want to add inline styling after.

In some cases, we might need the information on a style's state: Is it registered, is it enqueued, is it printed or waiting to be printed? You can determine it with the wp_style_is() function:

Here's an awesome function called wp_style_add_data() which allows you to add metadata to your style, including conditional comments, RTL support, and more!

Check it out:

Awesome, isn't it?

If I'm not mistaken, this is the first tutorial ever written about this little—but useful—function.

If you ever need to "deregister" a stylesheet (in order to re-register it with a modified version, for example), you can do it with wp_deregister_style().

Let's see an example:

Although it's not required, you should always re-register another style if you deregister one—you might break something if you don't.

There's also a similar function called wp_dequeue_style(), which removes the enqueued stylesheets, as its name suggests.

WordPress relies on multiple plugins to add different kinds of functionality to a website. The CSS and JavaScript needed by those plugins is usually required on specific pages. This means that loading the same unused CSS on every page results in unnecessary bloat.

In this section, we will learn how to only load CSS into WordPress on those pages where it is actually required.

In the following code snippet, we register the scripts and styles for the Chart.js library when the init hook is fired. After that, we enqueue these files conditionally when the wp_enqueue_scripts hook is fired.

The is_page() function is used to determine if we are enqueuing the script and stylesheet on the right page. You can pass individual strings and numbers or their arrays to check for multiple pages at once. In our case, the Chart.js files will be enqueued on pages that show sales and quarterly results.

Another way to improve the page load speed for users is to only load critical CSS in the head and load everything else in the footer.

The last parameter in the wp_enqueue_script() function allows us to load our scripts in the footer. Unfortunately, the corresponding wp_enqueue_style() function does not have this parameter. The best way to ensure that the stylesheet is added to the footer is to use the wp_footer action hook. It is used to output scripts or other data before the closing body tag.

Congratulations, now you know everything about including CSS in WordPress correctly! Hope you enjoyed the tutorial.

Do you have any tips or experiences you want to share? Comment below and share your knowledge with us! And if you liked this article, don't forget to share it with your friends!

If you want to learn how to add CSS to your WordPress site without coding, check out our post on How to Add Custom CSS to Your WordPress Site.

Also, if you're making changes to a third-party theme, it's a good idea to create a child theme and make your edits there. Besides directly adding custom CSS rules to your WordPress theme, you can also safely enqueue external CSS files with the help of a child theme.

While you can do a lot with free themes, if you are creating professional WordPress sites, eventually you will want to explore paid themes. You can discover thousands of the best WordPress themes ever created on ThemeForest. These high-quality WordPress themes will improve your website experience for you and your visitors.

I know for a fact that WP Rocket's caching plugin has a feature that removes unused CSS, but it's still in beta and might break things. Besides, by enqueuing the stylesheet - you can still reap the benefits of both minifying the file but also caching it.

So, the first thing you want to do is move all your custom CSS to a new stylesheet, in my case - I created a file called cstm-design.css and saved it in my root directory. You can change the directory to whatever you like, including /wp-content/ or your theme's directory.

As a side note, I did not move all my CSS to this file. Some classes I still want to style on a frequent basis, and having to edit the .css file and then reload the cache is too time-consuming of a process. So, only put the CSS inside your stylesheet file that you know you won't need to edit on a frequent basis.

The next thing you want to do is open up your functions.php file - either from the Theme Editor panel or by doing it from the command line if you host your site on a VPS.

Then copy & paste this snippet:

That's it.

You can change the file location by renaming the /cstm-design.css part.

For example, if your custom stylesheet is inside /wp-content/ - you would need to change it to /wp-content/cstm-design.css.

• Navigate to Appearance > Customize in your WordPress dashboard to open the WordPress Customizer.
• Select the Additional CSS option from the menu on the left in the WordPress Customizer interface: