WP Enqueue Style – The Right Way

Hello everyone, today I will talk about how to include CSS files into WordPress. We will achieve this by using the WP Enqueue Style function. In addition to that, we will also cover the best-practiced way of doing so in WordPress.

Finally, i would like to say, that there are a few ways to include CSS files into WordPress. However, we will be looking g at the best practiced one.

The WordPress Enqueue Style Function

wp_enqueue_style( string $handle, string $src = '', array $deps = array(), string|bool|null $ver = false, string $media = 'all' )

As you can see above, this is the layout of this function. Moreover, it accepts a few key parameters in order to work. Lets take a look at these parameters:

  • $handle – Its the name of the stylesheet, needs to be unique. For instance: ‘mobile-css’.
  • $src – This one is pretty straightforward, you need to provide the location of the file.
  • $deps – If you want your stylesheet to be depended on others before its loaded than provide the handles of these files in a format of an array. For instance: array(‘bootstrap’, ‘carousel-css’)’.
  • $ver – specifying the stylesheet version number If you require the use of versions. However, you should know, the default is set to false, a version number is automatically added equal to the currently installed WordPress version.
  • $media – specifies a stylesheet’s media type support. For instance: ‘print’.

Here’s how it looks inside my IDE:

wordpress enqueue style

Keep in mind, all parameters are optional, except the HANDLE and the SRC. In addition, you should know all styles in WordPress need to go in the head tag. However, sometimes you will see developers use the wp_enqueue_script function to include CSS. In doing so, they place the CSS file in the footer. Don’t do that by default. It’s not good.

Finally, before we dive into examples if you want to read the official WordPress documentation about the wp_enqueue_style() function, visit the codex here.

So, how to include CSS in WordPress header with this function?

This is an internal WordPress function, we will hook it to the other actions WordPress runs, called ‘wp_head’. Dont worry, its very simple. Look at the following example:

add_action('wp_head', 'theme_styles');
function theme_styles(){
    wp_enqueue_style('bootstrap',THEME_LIB_CSS.'/bootstrap.min.css');
    wp_enqueue_style('theme-css', THEME_CSS.'/stylesheet.css',array('bootstrap'));
}

The first line hooks our function to wp_head. Following that, we have our custom function to include CSS. I have 2 directives here, on one hand, I enqueue my own style, however, on the other hand, I want to also include bootstrap and make my style dependent on it to load up first.

To sum up our WP Enqueue Style Article

Take your time with this example and experiment yourselves until you get the hang of it. To sum up, what we did there, we just included a CSS file the right way 🙂

Finally, if you want more code snippets, visit my snippets here.

Leave a Reply

Your email address will not be published. Required fields are marked *