How to Enqueue a CSS Stylesheet in WordPress

In this article we will explore the wp_enqueue_style(); function and learn how to use it to add a custom stylesheet to your WordPress theme. This function is particularly useful when you want to bundle up all the custom CSS you have saved inside the Customizer panel. At the very least, moving your inline CSS to a stylesheet will help improve the performance of your pages.

How to Enqueue a CSS Stylesheet in WordPress

If you’re anything like me – you love to throw together various CSS snippets and use them to customize your WordPress site’s design. But, despite all the fun, those snippets can quickly add up to 1,000+ lines of CSS – which gets loaded on every single page, even if that custom CSS isn’t needed for that particular page; a big no-no for performance.

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:

add_action('init', 'my_custom_css_stylesheet');
 
function my_custom_css_stylesheet() {
    wp_register_style( 'custom-design', '/cstm-design.css' );
}
wp_enqueue_style( 'custom-design' );

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.

It goes without saying this is a pretty quick and dirty technique.

If you read the official reference, it’s possible to use wp_enqueue_style() to add version numbers, call child themes, and also specify media types. In our method, we simply call it as is, and most caching plugins will rotate the version automatically.