1.2 WordPress Coding Basics: Enqueuing Scripts and Styles
In this lesson, you’ll learn how to correctly add scripts and styles for your themes and plugins. I’ll show you how to enqueue a script or stylesheet within a function, and how to attach that function to the correct hook.
1.WordPress Coding Basics: Enqueuing Scripts and Styles2 lessons, 08:01
1.2 WordPress Coding Basics: Enqueuing Scripts and Styles
[MUSIC] Hello, and welcome to this Tuts+ Coffee Break Course on correctly and enqueuing styles and scripts in your WordPress plugins. In this course, I'm gonna show you how to write a function that will enqueue a style sheet in our plugin and hook it correctly so that it works in your site. Now it's really important that you do this properly. You don't just call the style sheet by referencing its URL or anything like that, like you might do in a static site. You have to use the correct hook in order to call in your styles and scripts. And that ensures that WordPress reads those correctly and doesn't duplicate any styles or scripts, or override them with any existing ones. So I've already written a plugin that outputs a list of the latest posts to the bottom of every static page on my site. And I want to add some styling to that. I want to put that list in a box. So in my plugin, I've added a folder called css. And within that, I've added a style sheet. And that style sheet includes some very simple styling for that latest-posts element. So you can see here, that it's enclosed in aside element with a class of latest-posts and that I'm targeting that with my CSS. But although I've saved that style sheet, at the moment it doesn't actually work. And that's because there's nothing telling my plugin that it should be using those styles. So what I need to do is enqueue my style sheet correctly, and I do that from my main plugin file. So you can see here, I've added some commented out text so I can see what I'm doing. And I'm gonna create a function. And I've called that tutsplus_enqueue_latest_posts_styles, which is a nice specific name. So the content of my function is two things. First, I'm going to register my style sheet, and then I'm going to enqueue it. And then finally, I'll attach it to the correct hook. So let's start by registering it. So I use the register_style function provided by WordPress, and that has a number of parameters. So my first parameter is the name of my style that I'm registering. And that's a unique name that I've just created here, latest_posts. And then the second parameter here is the location of the file with this styling in, the location of my style sheet. So this is in relation to this particular file, this plugin file. So I use plugins_url with its first parameter as the path, which is css/style.css because I've created this css folder. And the second parameter for that is __FILE__. And what that means is that this path is in relation to this file that we're in right now. So that's my first line register_style, and then I have to enqueue it. So I simply enqueue the exact same style that I've named here. So I'll enqueue it. So that's the content of my function, and now I have to attach it to a hook. So the first parameter is the name of the hook I attach it to, and that's the wp_enqueue_scripts hook. Now that might be a bit confusing, cuz I'm registering and enqueuing a style here, not a script. But you use wp_enqueue_scripts both for scripts and for styles. And then the second parameter is the name of my function. So that's my full function to enqueue my style sheet and to hook it to the correct action hook. I'll save that, go back to my site and refresh. And there's an error. And that's because they are wp_register_style and wp_enqueue_style. I typed those wrong. So I'll change those and go back in. And there you see it. So my styling for my Latest Posts list has been added to my site. Now if you're writing your own plugin, that's the way that you correctly add styling to what's output by your plugin. If you're working with a third-party plugin, you might choose to simply add the styling to your style sheet in your theme. But, alternatively, you could write a second plugin just to include some styling. Which is quite a long way of going about it, but you never know, it could be useful if you wanted to use it on more than one theme. Now, I've enqueued a style sheet here. Enqueuing scripts is very similar. And if you look at the Codex, it'll show you how to enqueue both styles and scripts. The two of them are done in very, very similar ways. The only difference is that the wp enqueue script function has different parameters. Because you also have to add in any dependencies such as jQuery or other scripts that are being used. This guide here on Tuts+ also shows you how to enqueue a style sheet into your theme and not just into a plugin. And the main difference there is that second parameter, because we're not using plugins_url. Instead of using plugins_url, we use get_template_directory_uri. And that fetches the URI for the directory that the current theme is in, and then you have the path to your style sheet from there. So that's how you correctly add a style sheet to your plugin and enqueue it. And as you've seen from my plugin, I've added, let's go up a level, I've added a css folder. If you were to add scripts, you'd use a separate scripts folder. And that keeps everything nice and tidy in your plugin. And that's why I like to put all my plugins in folders. Even if my plugin starts out as just a single file like this one, you never know in future, you might decide to add styles and scripts and other files to it. So when you're adding styles to your plugin, you should always do it like this. I hope you found this course useful. Thanks for watching.