Branding Your WordPress Login Screen

On occasion, I want to customize my WordPress login screen with some of my project branding. This is especially important when I’m working on a site that manages subscribers. It’s also a nice little touch to add to client sites, to give the client a sense of ownership.

I was surprised at the number of web-tutorials that encourage editing “wp-admin/css/login.css”, or overwriting the WordPress logo image in wp-admin.

In practice, try to avoid ever editing an item inside the wp-admin and wp-includes folder in WordPress. Any changes made to those files, are likely to be overwritten the next time you upgrade WordPress.

The WordPress login screen changes can be made in your theme folder.

Here’s how I did it:

The goal here is just to replace the WordPress logo with my project’s logo.

I started by creating a new logo image:

I saved that image to the “images” folder of my WordPress theme (You may already have a logo file there that you can use).

Then I created a custom CSS file and put it in my theme’s folder:

I just called it “login_screen.css”. It looked like this:

/*My Login CSS */
h1 a {
background:url(../images/my_logo.jpg) 0 0 no-repeat;
}

The last step is to call that function in your theme’s functions.php file (if your theme doesn’t have one, you can just create it… it’s good for all kinds of great stuff you may want to do in the future. (learn more about functions.php here…))

I put this in my functions.php file:

That function called the CSS file I had created, and just overwrote the element that included the WordPress logo.

You’ve probably realized already that that is just the tip-of the iceberg when it comes to customizing the wp-login.php css. I’ve seen some pretty sweet custom login screens.