Join Carrie Dils for an in-depth discussion in this video Adding a custom stylesheet, part of Advanced WordPress: Action and Filter Hooks.
- [Instructor] In this lesson, we're going to take a look at adding a custom stylesheet to this WordPress login page. Now, we've already got the shell of our plugin set up here in our code editor and before we get crackin' on it, I wanted to show you, again, this wp-login.php page. This is the page that powers that login page. Now, what I wanted to draw your attention to here is this function called login_header on line 33 and within that function, we've got this function called wp_enqueue_style being called and then we also have a hook here called login_enqueue_scripts and we can see from the documentation that that's what's loading up the scripting styles for the login page.
So, I just wanted to show you those function and this hook here before we move on. Going back to our plugin, let's start with a custom function that we're going to write to load up our custom stylesheet; and we'll just call this function cwpl_login_stylesheet. And, of course, you could name these functions anything you want, it's a custom function but, of course, being meaningful with your naming helps, as well as having a custom prefix here, to make sure that you're not colliding with anyone else's function names.
So, put a little comment here that within this function we want to load a stylesheet. And how do we do that? Well, WordPress provides us this function called wp_enqueue_style and we just saw that in the wp-login.php page, and it takes multiple parameters but the only one that's required is this handle here which is going to be a unique name of the stylesheet and we're going to use that but we're also going to use source, which is going to be the actual URL of the stylesheet.
You may have noticed that we don't actually have a stylesheet yet, so let's go ahead and create that. So, I'm just going to create a new file here in my plugin root and I'll call it login-styles.css. And I'm not going to put anything in it yet, but now we actually have a stylesheet that we can load. So, going back to my function, I'm going to use that wp_enqueue_styles and that first parameter is a handle and that handle should be unique according to the documentation, so I'll call it cwpl-custom-stylesheet.
Now, the next thing our documentation says is that we have the opportunity to pass in a source and it needs to be the full URL of the stylesheet or the path of the stylesheet relative to the WordPress root directory. So if I were to go back to my plugin and just write login-styles.css, that's not going to be sufficient because it's not going to know where to look for that relative path. So, I need a function that will get me the full path to this file.
And it so happens that we do have a function for that; it's this plugin_dir_url and then with the file passed in. And if we look at what it returns, it says the URL of the directory that contains the plugin including a trailing slash. So, that's perfect, that's exaclty what we want. So, going back to my plugin, I'm going to preface this with plugin_dir_url and we'll pre-pin that, and I'm not going to add a slash here because this function actually produces a trailing slash.
Okay, so let's review what we've got. We've got our function, and within our custom function, we're calling this wp_enqueue_style, oops, little bit of an extra s there, wp_enqueue_style; we've got our style sheet handle; we've got the path to our style sheet; so the only thing left to do at this point is to actually hook it into WordPress. And if we go back to our wp-login.php page, we can see that we are going to hook it right here on this login_enqueue_scripts.
So we'll say add_action, that's where we want to hook to and the function we want to hook is this cwpl_login_stylesheet. And let's add a little comment here so that we know what's goin' on. Load a custom stylesheet on the login page. And I'll get rid of this little inline comment. Okay, let's save that and go take a look.
I'm going to refresh the page and nothing happens visually and that's because I don't have any custom styles added to that stylesheet yet. But, if we do a View Page Source, we should see our custom stylesheet; and there it is. We can see that we've got our domain, we've got the full path that was produced by that plugin_dir_url function, and then we've got the name of our styelsheet. So let's go ahead and put a little style in there just to make sure it works.
And we'll just say, let's set the background color to gray; nothin' fancy here. I'll save that, we'll go back and refresh this page, and there we can see that we've got a background color of gray. So all in all, I've got a pretty lame stylesheet here, but you could customize this any way you wanted to match the rest of your WordPress site. This is just scratching the surface of how you can interact with WordPress using an action hook.
- Actions and filters explained
- Identifying available hooks and filters
- Looking at load order
- Understanding callback functions
- Creating custom hooks
- Using third-party hooks
- Building a new WordPress plugin with filters and actions