Join Morten Rand-Hendriksen for an in-depth discussion in this video Why enqueue stylesheets?, part of WordPress Developer Tips: Enqueuing Styles and Scripts.
As you start watching this course, you're probably wondering, what exactly does it mean to enqueue a style sheet or a script? Let me start with style sheets. You probably know that when you add a style sheet into a page, what you're actually doing is calling in the style sheet in the head section of the markup of that page. And then that style sheet is applied to all the content. And you can see that if you go to any website on the web. For example, on Lynda.com, if you look at the markup for Lynda.com you'll see right here at the top we have the head section, which is all the code that tells the browser how to handle the content inside the page.
Then we have a link tag that has the relation style sheet. It says that the type is a text file with a CSS code in it, and here we have the direct link to the style sheet for this page. You can have multiple different stylesheets appended to one page, and they'll be called in turn, and whatever is the latest style sheet is the one that has precedence because style sheets work based on a cascade. That's why they're called cascading style sheets. You can also see this if you go to WordPress sites. So, here we have my WordPress site, mor10.com.
And if we again look at the markup for mor10.com, you'll see we start out with a head section, and then we have a long list of different code that's being called in, including the main style sheet, which you find all the way down here. Here again, you see link relation style sheet, and then it has an ID and then the href that points directly to that style sheet. You will also notice on this page, there are multiple style sheets. We have one here, we have another one here, another one here and another one here. And all of these style sheets combine to handle all the different content that displays on the page.
And this is actually the reason why you want to enqueue your styles. You see, if you just look at this and you think about the structure of a WordPress theme, you would say, well, because the style sheet should be called in the head section, I should probably put it in the header.php template file. And technically, that would work. However, you would have very limited control over when that style sheet gets called in. So, let me give you an example. Let's say on my theme, I want to have two different layouts. So, I want this layout, which has the sidebar.
And I also want an alternate layout that doesn't have the sidebar. To make that happen, I may make the decision to put the layout styles in a separate style sheet and then say, if we are in a two-column layout, meaning we have the content on the left and a sidebar on the right, then use style sheet number one. If we have a single-column layout with no sidebar, then use style sheet number two. If I choose to enqueue my scripts, what happens is, instead of putting the call to the style sheet inside the header.php file, I write a little function within my functions.php file that says, in the following conditions, enqueue the script into the header.
So what happens is, the page gets tested and says, are we meeting the conditions? Yes? In that case, put in the link to the current style sheet. If, on the other hand, we are in a different condition, putting the link to a different style sheet. And you can see it right here. You see, this link relation style sheet points to the main style sheet for the Simone theme. And then directly below, we have a second call to a style sheet that specifically goes into the Simone theme, goes to the Layouts folder and finds another style sheet called content sidebar, and this is the style sheet that displays that two-column layout.
On my site, I can then also set up a separate page that has a single-column layout, and in that case, I would call in another style sheet called noSidebar.css and that style sheet would only be called in, in those instances. So, to translate it into English, when we enqueue a style sheet, what we are doing is adding the style sheet, and dynamically, depending on the conditions of the current page we're on. And this will all make sense when you see the function itself and learn how to add it into a theme.
And that's next.