Customizing the WordPress Login Screen

Are you new here?

If this is your first time visiting our website, welcome! Learn more about us and what we do, or look through our complete blog archives for more good ideas.

Posted on March 24, 2009 under How To's, Wordpress

Blog Posts from Addicott Web About Wordpress

When you’re building a website in WordPress, you can customize just about anything – and the login screen is no exception to that. It doesn’t take much time to do, and it’s one of those little touches that are a big hit with your clients.

There are a lot of resources out there for customizing your login in previous versions of WordPress, but not a lot of resources for working within WordPress 2.7+. So, what I want to do here is use my custom login screen as a way to illustrate how I achieved that look, and what files you need to use in particular.

Why customize the WordPress login?

I’ll cover how to go about customizing your WordPress login screen in a bit, but for now I want to answer the big question you might be having – why would you want to customize it? Here are a few reasons:

Familiarity for multiple users – A lot of clients may have multiple people posting or administering content in WordPress on their website. Creating a custom login screen with the organization’s or website’s logo in it will let all of them know that they’re in the right spot when they go to post new content, while reminding them of just who they’re posting for.
You care about their experience too – Creating a custom login screen shows your clients that by including these small touches, you’re thinking about their experiences administering the website as much as you are about what their users experience while visiting the website.
Extend your branding – On many blogs, people might be required to log in before they can post a comment. As the person running the website, customizing the login screen extends your branding so that those people get a continuous sense of your business as they progress from the actual website through to the admin area.

If you’re looking for some inspiration, the actual design theme of the website should be a good starting point. But you might also want to check out this Flickr gallery of custom WordPress logins for some great examples of what other designers have done.

How to create a custom WordPress login

I wanted to have my WordPress login look like a natural extension of my website, and I think I achieved that look. Here is what my WordPress login screen looks like:

How did I do that? There were two things I had to do – make a minor change to the page itself, and then update the CSS file that governs how the page looks. Let’s go through each one in more detail.

(Note: the following two sections are more technical in nature than I normally write about, and are intended for WordPress designers and developers who understand this stuff.)

Step 1: Update the actual page

Normally I’m not one for updating component pages of the WordPress installation, but when I was styling my form I noticed that some of my styles weren’t taking effect as I wanted them to – in particular, the field labels in my login form. I’m labeling this as step 1 because by doing this first, the new styles that you’re implementing in step 2 will work properly.

You can find the actual login file, called wp-login.php, in your root directory, or whatever directory you have WordPress installed in on your website.

When you open up the file and scroll through it, you’ll notice that there are three separate areas within the page. That’s because this page doesn’t just show the login screen – it also shows the screen if you’ve forgotten your password or are registering as a new user.

In either case though, there is a little quirk to how all those forms are coded on the page. By default, this is how the field labels and input fields are coded:

<p><label><?php _e('Username') ?><br />
<input type="text" name="user_login" id="user_login" class="input" value="<?php echo attribute_escape(stripslashes($user_login)); ?>" size="20" tabindex="10" />
</label></p>
<p><label><?php _e('E-mail') ?><br />
<input type="text" name="user_email" id="user_email" class="input" value="<?php echo attribute_escape(stripslashes($user_email)); ?>" size="25" tabindex="20" />
</label></p>

The best way to explain the problem with this is to use my form as an example again. I wanted to add a few pixels of margin to the top of my input fields so that there would be a bit of visual separation between the field label and the actual input field itself. Because the <label> tag is closed after the input field, that extra margin would be visible after the input field, not after the label as I had intended.

All you have to do to fix this is update the page so it looks like this:

<label><?php _e('Username:') ?></label>
<input type="text" name="log" id="user_login" class="input" value="<?php echo $user_login; ?>" size="20" tabindex="10" />
<label><?php _e('Password:') ?></label>
<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" tabindex="20" />

See the difference? You’re closing the label tag after the actual words that will appear above the input field, not after the input field itself. Once you do that, your new styles will work properly. (You can also leave in the <p> tags if you choose to, but I don’t find them necessary because I can add in the proper margins in my CSS.)

Make sure that you do the same thing in the two other spots within the file where this is the case. Just scroll through the file and you’ll see them.

Step 2: Update the CSS

Now that you’ve made the necessary changes to the actual login page, you can go ahead and start styling it. In WordPress 2.7+, how the login screen looks is determined by the login.css file, which can be found in your /wp-admin/css/ directory.

Swap out the logo

One of the first things that I did when I created the login screen above was to swap out my logo for the WordPress logo, which appears as the default. Look for the following line within the login.css file:

h1 a {
background: url(../images/logo-login.png) no-repeat top center;
width: 326px;
height:75px;
text-indent: -9999px;
overflow: hidden;
padding-bottom:5px;
display: block;
}

So in order for your logo to appear instead of the default WordPress logo, you can either save your image as logo-login.png and upload it to the /wp-admin/images/ directory, or you can save the image under a file name of your choosing, and then just update the CSS instead.

One thing to note: make sure to adjust the height accordingly so that it reflects how tall your image actually is. Otherwise, if it’s taller than the default 63 pixels, it will get cut off.

Recommendation: If you don’t have time to completely style the login page and had to choose one thing from here to do, this would be it. By swapping out the logo, you’re accomplishing all three of the points I mentioned above, albeit in a more basic way than by completely styling the login form.

Update the page background

To update the page background, look for this line in your CSS:

body {
border-top-width: 30px;
border-top-style: solid;
font: 11px "Lucida Grande", Verdana, Arial, "Bitstream Vera Sans", sans-serif;
}

Just update it with whatever image or color you’re choosing to use as your background, and you’re all set – almost.

One thing I noticed is that when you update your <body> style, it leaves a lot of white space at the bottom of the page. I don’t think that looks good, so you need to add this into the CSS in order to get the color or background image to take up the whole browser screen:

html {
height:100%;
}

Style the login form

Once you set the new logo and background, it’s just a matter of styling the actual login form. Look for this line in the login.css file:

form {
margin-left: 8px;
padding: 16px 16px 40px 16px;
font-weight: normal;
-moz-border-radius: 11px;
-khtml-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 5px;
background: #fff;
border: 1px solid #e5e5e5;
-moz-box-shadow: rgba(200,200,200,1) 0 4px 18px;
-webkit-box-shadow: rgba(200,200,200,1) 0 4px 18px;
-khtml-box-shadow: rgba(200,200,200,1) 0 4px 18px;
box-shadow: rgba(200,200,200,1) 0 4px 18px;
}

This is the code that determines how the actual form area looks, so start styling away to get it to look how you want. There are also separate styles defined for the form input fields, field labels, and field buttons, so you’ll have to style those as well to achieve the look you want.

One final thing to keep in mind

When you upgrade to a newer version of WordPress in the future, that new version will over-write these changes, and your login screen will revert to how it comes by default. This can definitely be a problem if you’re using WordPress 2.7+ because those versions will automatically update themselves when newer releases become available. But, if you save your files somewhere, you should be able to easily recreate the login screen without any problems.

Normally this problem would be solved with plugins, but I haven’t had any luck in finding any WordPress plugins that will do this. If anyone knows of one, share in the comments below.

Thoughts?

So now that you know more about customizing the WordPress login screen, if you have a WordPress-based website, give it a shot yourself and see if you have any success with it. If you want to share your WordPress login pages, leave the link in a comment below, and I’ll compile them for everyone to see.

If you’ve had any success doing this for clients, post a comment too and let everyone know how customizing the login has been received by the client.

29 Comments

Warning

Customizing the WordPress Login Screen

Are you new here?

Why customize the WordPress login?

How to create a custom WordPress login

Step 1: Update the actual page

Step 2: Update the CSS

One final thing to keep in mind

Thoughts?

Similar Posts

29 Comments

Leave a Comment

Search

Categories

Archives

Contact Us

Testimonials

Connect With Us