How To Create A Custom WordPress Login Page

John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown SEO.

Website Facebook Twitter LinkedIn Instagram YouTube

Creating a custom login page for your WordPress site is a small enhancement that makes your site feel unique.

This modification won’t make your website rank higher in Google, but your internal team will appreciate the change.

Trading in the default white login screen for your brand colors, fonts, background, and logo lets everyone know they are in the right place, adding an extra layer of panache to your site.

Once you know how to do this, styling the login screen is a breeze. You’ll need FTP access to your WordPress install and a text editor to make the magic happen.

Step 1: Add a Login folder to your theme

We’re going to add a new folder called login to our target theme folder. I use Filezilla to drill down: wp-content > themes > lockedown > login. Since lockedown is the name of the theme folder I’m using on this site, that’s where I’m creating the new folder, so I can place my login page styles inside and keep them where I can find them later.

Step 2: Add Some Code to Functions.php

Adding the following code to your functions.php file will tell your theme to add a link to your login stylesheet when we are on the login screen. We need to add this function because our default theme stylesheet does not load on the login page. When our WordPress site sees we are on the login page, it adds an action hook that adds our custom CSS link.

    function custom_login_css() {
       echo '<link rel="stylesheet" type="text/css" href="'.get_stylesheet_directory_uri().'/login/login-styles.css" />';
    }

    add_action('login_head', 'custom_login_css');

Step 3: Write some custom styles

     body.login {
       background: #f99557 url(/wp-content/uploads/2012/09/peach-noise.jpg) repeat top left;
    }

    .login #nav a, .login #backtoblog a {
      color: #222!important;
      font-size: 2em;
      font-family: 'league_gothicregular', 'League Gothic', sans-serif;
    }

    .login h1 a {
      background-image: url('../login/login-header.png');
      background-size: 310px 62px;
      width: 300px;
      height: 62px;
      padding: 0 0 15px 26px;
    }

    .login form {
       background: rgba(120,70,30,.25);
    }
    .login label {
       color: #fff;
       font-size: 16px;
       text-shadow: 0 1px #666;
    }

Let’s walk through these style overrides one at a time.

The body.login changes the background from the standard gray to the same background seen in the header of this site, dark orange background-color, with a repeated PNG tile on top.

.login #nav a and .login #backtoblog a control the links that say “Lost Your password” and “Back to <your-site-here>, respectively. In this case, I’ve changed the font-size and font-family to better fit the rest of my site. Unfortunately, an important! tag was necessary to override the WordPress defaults for this page. When in doubt, use Chrome Developer Tools (Right-click) > Inspect Element or Firebug > Inspect Element With Firebug to isolate what styles are affecting a specific element.

To remove the standard WordPress logo, I changed the background-image for .login h1 a. That’s the link that takes you back to WordPress.org.You might have to experiment with the background-size, width, height and padding to get it looking right. Make a note of how big your logo image is, and adjust the background-size accordingly.

On the .login form, I simply made the background slightly opaque, with a different color.

Lastly, I changed the styles on the .login label (“Username” and “Password” to better fit how the design looked at that point.

You can change the button styles as well, (there are a few core button styles to override), I just chose not to this time, because the orange and blue don’t look too bad together.

Step 4: Push Login Assets to Your Server

Take your login-styles.css and any image files that you need, and FTP them into the login folder you made earlier. When you go back to the login screen, your site should now have a custom WordPress login page. Wicked!

Remember it is all the little details that make up the bigger picture, in the craft of web design, or any other craft. I know for me, it feels a little bit better to look at a login screen that fits the site I’m supposed to be on, even if it’s my own site that no one else will see. Little touches like the custom login page make the client fall in love with their own site just a little bit more, and that’s a very worthy goal, indeed.

Hope this helps!

P.S.: If this explanation still doesn’t help you shed light on the subject, I recommend you check out Sarah Gooding’s article on the same process.

John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown SEO.