Don't forget to style the login page!

I'm no longer suprised to see the default WordPress styles being used when I visit a site's login/logout page. Maybe devs and designers forget to do it, I don't know. I think it's a shame, especially when it can be done with a few lines of CSS.

Here's how we can style the admin login/logout page in 2 small steps

Step 1. Create a custom login stylesheet

The default WordPress login stylesheet is 'login.min.css', which can be found inside 'wp-admin/css/' directory. Instead of amending this stylesheet, the plan is to inject a custom stylesheet into the page and override the default styles.

Let's make our custom stylesheet

// custom-login.css
       
.login {
    background: #67bace ;
} 
    
.login h1 a {
    background-image:url('../img/login-logo.jpg');
    background-position: center center;
    background-size: 164px 88px; 
    width: 164px; 
    height: 88px; 
} 
    
.login form {
    background: #ffffff;
    border-radius: 1em; 
} 
    
.login #nav a, 
.login #backtoblog a {
    color: #333;
    text-decoration: none;
}
    
.login #nav a:hover, 
.login #backtoblog a:hover {
    text-decoration: underline; 
}
    
div.updated, 
.login .message, 
.press-this #message { 
    border-left: 4px solid #006B85;
}

This simple custom stylesheet replaces the default WordPress logo with our own and styles a few specific elements. To know what elements we can style, and the CSS classes we can target, we need only to 'View Source' (inspect elements) and/or to look at the default 'login.min.css' file.

* 4.2.2 (latest version to date)

Step 2. Make a custom login function

With the custom stylesheet made and stored on the server, we can now inject it into the login/logout page with a little function.

Remember to amend the source (href), place this inside your theme's functions.php file

function custom_login_stylesheet() {
  echo "<link rel='stylesheet' href='http://somewhere/custom-login.css' />"; 
}
add_action('login_head', 'custom_login_stylesheet');

Job done!

Why not edit login.min.css?

We don't amend the 'wp-admin/css/login.min.css' stylesheet because the amendments will be overwritten everytime we update WordPress core files.

Where to store our custom stylesheet?

We could store our custom stylesheet inside the theme directory but it could potentially be overwritten or removed with future theme changes. I choose to keep the custom stylesheet inside a CSS directory immediately inside the root directory.

Don't forget the hidden elements!

When styling the login page, enter a wrong password and notice the error message. This can be styled. Click "Lost Your Password" and notice the message that appears. This can be styled, too.

The logo on the login page is a link

Though we've changed the logo to our own, it still directs us to wordpress.org. Let's fix this!

• How to change the login page logo link url and title