Style Your WordPress Login

A few weeks ago, I read a neat little post over at WPCandy about tweaking the WordPress login page. That post gave me a lot of inspiration and ever since redesigning WDW, it was on my to-do list. Today, I finally got around to styling it up.

One thing I discovered is that there is no need to add any plugins or to modify any core WordPress files. Adding a plugin for a simple task seemed a bit of an overkill and modifying the core files is never a good idea, especially when you update your instance of WordPress you have to re-do all your login styles again.

So if you want to go plugin free and give your login screen a little character you might enjoy this post.

The Web Design Weekly Login Page

View the finished product – Login Page

If you want to apply the same blurred look, first take a screenshot of your site. This will become your new login background. Open that image up in Photoshop and apply a Lens Blur effect to the image. I just used the default setting, but you could go crazy.

Save that file somewhere in your themes folder. Either the images folder or a dedicated folder for your sites login page files. I have gone with the second option.

While you are in Photoshop it is probably a good idea to also get your logo sorted. Save it to the same place as you new background image.

Next, add the the code below to your functions.php file and tweak it to suit your own layout and file structure.

The code below add some styles to the login page. One thing to note is that you have to be quite specific with your CSS rules so they override the default WordPress styles. I have targeted the body class and that seemed to do the trick.

<?php
function custom_login_logo() {
  echo '<style type="text/css">
    body.login #login{padding-top:0;}
    body.login h1 a{
      background-image:url('.get_bloginfo('template_directory').'/assets/images/login/login-logo.png);
      height:122px;
    }
    body.login{
      background-image: url('.get_bloginfo('template_directory').'/assets/images/login/wdw-login-bg.png);
      background-size:cover;
    }
    body.login #nav{
      /* Your styles */
    }
    body.login #backtoblog{
      /* Your styles */
    }
  </style>';
}
add_action('login_head', 'custom_login_logo');
?>

Now you should be rocking a cool login page with no extra plugins added and no core files edited.

Do you have a cool login page?