How to register and enqueue styles in WordPress

WordPress offers a very simple API for loading your stylesheets. Although you can just output the HTML yourself, there’s a really easy way to conditionally inject stylesheets into certain pages.

In this guide, I’ll teach you all you need to know about registering and enqueuing stylesheets in WordPress:

How To Register Styles

When you register a style in WordPress, you can load it wherever you want without having to define its location every time. This way you only have to update the name and other details about your styles in one place rather than updating them in every place you use it.

To register a stylesheet, all you have to do is call wp_register_style:

wp_register_style($handle, $src, $dependencies, $version, $media);

Here’s what the arguments are about:

• $handle — This is the name you will use later to load/enqueue this stylesheet.
• $src — The URL of the stylesheet you want to load. It can also be the path to the stylesheet relative to the WordPress root directory.
• $dependencies — An array of other registered styles that this style depends on. If your stylesheet called home.css depends on another style called global.css, then you need to pass it as an item in this array.
• $version — This version will be passed as a query string at the end of this stylesheet’s URL. If you pass a version number here, then it will invalidate the older browser-level and CDN-level cached versions of this stylesheet.
• $media — If you want this stylesheet to only load based on a media query, then you can pass it as a string here. For example, pass ‘print’ if you want to load this stylesheet as a print stylesheet.

Only $handle and $src are required when you call this function.

Here’s what it will usually look like:

function wpturbo_register_stylesheets() {
	wp_register_style( 'my-custom-stylesheet', plugins_url( 'my-custom-plugin/css/style.css' ) );
}
add_action( 'wp_enqueue_scripts', 'wpturbo_register_stylesheets' );

Place the above code in a custom plugin to register the stylesheet. Use our WordPress plugin generator to generate a starter template. You can then place this code in it.

If you want to register a stylesheet in your theme instead, then you’ll use the get_template_directory_uri ****function instead:

function wpturbo_register_stylesheets() {
	wp_register_style( 'my-custom-stylesheet', get_template_directory_uri() . 'my-stylesheet.css' );
}
add_action( 'wp_enqueue_scripts', 'wpturbo_register_stylesheets' );

How To Enqueue/Load Styles

Once you have registered your stylesheet, you can load it on any page you want by using the wp_enqueue_style function:

wp_enqueue_style('my-custom-stylesheet');

This is what it looks like in action:

function wpturbo_register_stylesheets() {
	wp_enqueue_style('my-custom-stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpturbo_register_stylesheets' );

You can also use this function to enqueue a stylesheet directly without registering it first:

function wpturbo_register_stylesheets() {
	wp_enqueue_style( 'my-custom-stylesheet', get_template_directory_uri() . 'my-stylesheet.css' );
}
add_action( 'wp_enqueue_scripts', 'wpturbo_register_stylesheets' );

Conclusion

Registering a stylesheet and enqueuing it in WordPress is really easy. You only need to do two things. First, call the wp_register_style function with the name and URL of the stylesheet. Then, call wp_enqueue_style and pass it the name of the stylesheet you registered.