We Are Communication Architects

Building brand awareness through content creation and community engagement.

February 11th, 2011

Customize your WordPress login page

You may be surprised to find out that you can customize the WordPress login screen. Maybe you knew this already, but did you know how easy it is? In fact all you need is a function in your functions.php file and a new stylesheet. Of course just a few small touches can make it even better.

Here’s how I do it:

Create a separate folder for your login-specific files I create a folder named ‘login’ within my theme folder. I end up with 2 files in here.

Create a separate stylesheet within your new folder I name it login.css just so there’s no confusion. You only have a few items you can and need to style.

html {background: #CD1643;}
.login {background: url(../images/bg-body.gif) repeat-x top center;}
form {border: 1px solid #ededed; background: #e60035 url(bg-form.jpg) no-repeat; width: 275px;}
#nav {padding-top: 8px;}
.login #nav a {font: bold 12px Adobe Garamond, Georgia, serif; text-decoration: none;}
h1 a {width: 266px; height: 84px; background: url(../images/logo.gif); padding: 0; margin: 0 0 15px 27px}
label {color: #ededed;}
input {background: #fff;}

Create your login page images Notice the image references in there, bg-body.gif, logo.gif and bg-form.jpg. Only the bg-form.jpg is specific to my login page, I just used the same background image from the main site and pulled in the logo from the main site. None are necessary but I use these images to apply touches of the site’s theme to the login page. One thing to note is that the logo is actually a background of an H1 tag. Notice the line in the stylesheet that specifies the dimensions and URL of the logo.

Create custom login function in functions.php Just add this function anywhere in your code on functions.php

function custom_login() {
  echo '<link rel="stylesheet" href="' . get_bloginfo('template_directory') . '/login/login.css" type="text/css"/>';
}
add_action('login_head','custom_login');

That’s it. Seriously, that’s all it takes.

And you could do even less if you wanted to. I tried to make my example as minimalistic as possible while showing how to customize it a bit.

About the Author
Pete Schiebel is the lead front-end developer for the Platforms team, described by some here as the "front end MacGyver" for how he works to make sure client projects look and function as advertised. Follow him on Twitter @sneakepete.

Filed in CSS, Design, Development, Social Media, WordPress

Comments are closed.