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.

WDW Login Page
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.

Lens Blur

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.

Folder Structure

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?

8 Comments

  1. Awesome trick! Already implemented and better performance than a plugin ;) You rock WDW!

  2. Very nice wp-login.php page. Is there a way to map the url to something more user friendly such as login.php?

    • There sure is.

      I have not gone down that road, but by tweaking your .htaccess file with the snippet below should do the trick.

      RewriteRule ^login$ http://yoursite.com/wp-login.php [NC,L]

      For more info check out this post – Simpler Login URL

  3. Wow! It worked! Not even good with coding but I just went for it!

    • Awesome to hear Dennis.

  4. This works very well, but I am trying to figure out how to make the “login-logo” redirect back to the “home_url” instead of going to “wordpress.org” , It’s doing this in wp-login.php.

    What is the best way to do this in the functions.php?

    • Nice work Mills!

      Looks like a very handy little function for future builds.

This post currently has 8 responses. What do you think?

You can use basic HTML when posting code, please turn all < characters into &lt; or > into &gt;
If the code is multi-line, use <pre><code></code></pre>

Leave a Reply

Your email address will not be published. Required fields are marked *

Current ye@r *