Join Morten Rand-Hendriksen for an in-depth discussion in this video Introducing the wp_enqueue_style(); function, part of WordPress Developer Tips: Enqueuing Styles and Scripts.
Now that you know why you want to enqueue your style sheets, let's take a look at the how. To enqueue a style sheet, you would use the function WP enqueue style. The WP enqueue style function has five main parameters that you can use to further specify how that style sheet is being enqueue'd into your page. The first parameter is the handle, and this is a name for your current enqueue action. So, you're basically giving the style sheet that you're enqueing a name and then you can use that handle to refer to it later in the code.
And later in the course, I'll show you exactly how that works. When you use the handle, make sure to always name space it with the name of your theme or your plug-in. Meaning, start off the name with the name of your theme and your plug-in. This is a good idea because that avoids any kind of conflict later where someone else has to find style sheet with the same exact name. By giving it the name of your theme or plug-in, you're pretty much guaranteed that you'll never have a conflict. The next parameter is the source parameter and this is where you would put in the URL that points to your style sheet.
If you are using an external style sheet somewhere on the web, say a google font style sheet for instance, you would simply slot that entire URL in here. If you are developing a theme or a plug-in, you would use a WordPress function to point to either the theme folder or the plug in folder and then put in the remaining part of the URL as hard code. The third parameter is dependencies, and this is one of the really powerful things about WP enqueue style, and WP enqueue script. You can actually make a style sheet dependent on a different style sheet.
So, if you've already registered another style sheet, say, the main style sheet. And then you want to make the style sheet you're calling in a custom style sheet dependent on the main style sheet. Then you put the main style sheet's handle as a dependency. And you can also put in many handles using arrays to do this. By making the style sheet dependent on another one, what actually happens is the dependent style sheet is called second after the dependency. So, if you make a custom style sheet dependent on the main style sheet, then the main style sheet is called first in the HTML and then the custom style sheet is called second.
The fourth parameter is the version number. This is because a lot of browsers will cache style sheets and there are a lot of websites that also using caching services that again will cache the style sheets. So, even if you make an update to your style sheet, the browser and maybe even the server will still serve up the old version of the style sheet. So, by increasing your version number, you're guaranteed that the update actually kicks in. And the trick I use here, is I use the current date as the version number. This helps me remember when I added the style sheet into the code, and it also makes it obvious to the browser that it needs to load a new style sheet.
Because there's not much chance that you'll update the same style sheet multiple times in the same day. The fifth and final parameter is the media parameter. And this is specifically to style sheets. When you add a style sheet into the mark up of a page, you can define what type of media that this style sheet kicks in with. By default, it's always set to all meaning no matter how you access the content you'll always see the style sheet. But you can change this to screen, or handheld, or print, or a number of other types of media.
And by doing that, you are telling the browser, only display using this style sheet if you are a screen, or if you are a handheld device, or if you are going to print this content. This is a rarely used function, but it's extremely powerful when you need it. For example, if you are serving up a print style sheet that only kicks in when people are printing out the content, then this is where you would define it. You simply say, print, as the last parameter, and it automatically gets appended to the style sheet called. WP_enqueue_style is a core function in WordPress, and therefore you'll find all the documentation you need about it if you go to the wordpress.org codex.
Here you have a full breakdown of how the function works that covers everything I already told you. And there are also code examples to show you how you can use it in different scenarios. This is also where you find information on the WP register style function that you can use in conjunction with the WP enqueue style function if you want to use these dependencies I talked about previously. That is not covered in this course, so if you want to learn more about it, you can simply go to the WP register style link right here on the enqueue style page. And there you'll get examples of how you would use that function in conjunction with WP enqueue style.
So now you know the function, the next step is to see how it is applied in a real theme.