- Send us a note
- info@addicottweb.com
- (773) 633-7078
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
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.
Similar Posts
- Style Your Form Fields with Icons to Improve Usability (March 16, 2009)
- Styling Your Forms to Improve Usability (March 2, 2009)
- Just Installed WordPress? Here Are 8 Things to Do (August 20, 2009)
Charles Jordan wrote on April 9, 2009:
Would it be possible to have a .jpg image in the background of the login box – like a template… so it becomes a plugin? and you would just modify the .jpg – and never have to play w/ the actual CSS or PHP – just change a file “login_bg.jpg” for example? Would be a really handy plugin – for those of us who are clueless with the CSS and PHP
Posted at 6:24 am
Addicott Web wrote on April 14, 2009:
You could update the WordPress logo file (I believe that image file is named logo-login.gif) and then just upload it over the existing file in the /wp-admin/images/ directory. The only catch though is that if you want to have it be taller than it is, you would still have to go into the CSS and update it accordingly. I agree, it would be a nice plugin to have, but if you have a good grasp of CSS, you should be able to handle it pretty easily.
Posted at 10:16 am
Patience Newman wrote on April 24, 2009:
Great Post! I really want to try this, but I am not sure which ones to replace. You mentioned there are three different sections. I am searching around in my file, but I do not see anything that looks exactly like the default code you are displaying. Can post what lines to search for…maybe I am just looking too hard (I don’t know PHP, but I do know copy and paste)
Thanks for the article!
Posted at 4:30 pm
Patience Newman wrote on April 24, 2009:
Okay I figured it out…instead of copy and pasting.. I just moved the tags like you said took me an hour but it looks better than the regular wp login page. Thanks again for the great post!
Posted at 5:45 pm
Addicott Web wrote on April 27, 2009:
Thanks Patience – I’m glad that you were able to figure it out and that my post came in handy! Would you mind taking a screenshot of your login page and sharing the URL of the image with everyone, so we can see how your work turned out?
Posted at 8:20 am
Patience Newman wrote on April 27, 2009:
Sure thing! The site is under super construction, I just started on it the other day. Also I need to update my admin color scheme to change the login button and password link.
Here’s the link: http://www.everydaylady.net/images/custom_login_screenshot.gif.
Posted at 10:54 am
Addicott Web wrote on April 27, 2009:
That looks great – nice job! Good luck with building your website!
Posted at 11:38 am
Patience Newman wrote on April 27, 2009:
Thanks to your website …building my own has gotten a whole lot easier! How do I digg this post?
Posted at 11:47 am
Addicott Web wrote on April 27, 2009:
You can use the “Share This” button right at the bottom of the post; it has links to Digg and all of the other social networking websites. Thanks in advance for the Digg!
Posted at 12:43 pm
allie wrote on May 25, 2009:
I went through styling the login page…went so far as to remove the stock wp log and upload my own. It in the admin images folder, changed the name in the css and still have the wordpress logo on the login screen. It makes absolutely no sense…any ideas?
Posted at 2:17 pm
Addicott Web wrote on May 27, 2009:
Hmm, that’s interesting that you’re having a problem with it. I don’t mind taking a look at your login page and setup to see what’s not working right. Feel free to send me an email separately about it.
Posted at 9:31 am
Jessica Bosari wrote on July 22, 2010:
Great post, fixing some registration problems and came here thinking I might as well make my register screen pretty too!
I believe our friend’s problem is in the cache, no? Happens to me all the time. I use W3 cash and keep a button on my bookmarks bar to navigate there to clear the cache. It might also be the browser’s cache.
Posted at 5:46 am
PB wrote on May 27, 2009:
Would it be possible to have a .jpg image in the background of the login box – like a template… so it becomes a plugin? and you would just modify the .jpg – and never have to play w/ the actual CSS or PHP – just change a file “login_bg.jpg” for example? Would be a really handy plugin – for those of us who are clueless with the CSS and PHP
Posted at 2:19 am
Addicott Web wrote on May 27, 2009:
Sure, that’s possible to do – just set the image as the background image of your box in the CSS. Unfortunately you would still have to play with the CSS, although it is fairly simple to do.
If you don’t want to work with the CSS or PHP directly though, there are a few plugins to consider. I found one called Wp Customized Login in the WordPress plugin directory, which seems like it might be good. If you try it out, let me know, I’d be curious to hear about it!
Posted at 9:28 am
Sean Callahan wrote on August 22, 2009:
Does anyone know how to remove the link on top of the image? I went into WP-ADMIN.php and edited the line I thought it would be, around 74, right next to the div id login…..hmmm…I saw the php echo for wordpress and the a href for it and took them COMPLETELY out (after many attempts at just making it my URL). Still no luck…am I in the wrong file or is there a sneaky way Matt Mullenberg did it or something?
Posted at 8:43 pm
Phidev wrote on August 23, 2009:
@Sean Callahan
To remove the “back to xxxx blog” you need to edit wp-login.php. Towards the bottom of the file you will find a a line of code that looks like this:
<a href="/” title=”">
Just deleted it and save your file, if you are working with a local copy, make sure you upload the file into the server.
Cheers!
Posted at 8:11 am
Phidev wrote on August 23, 2009:
Just do a search for “backtoblog”, and you will find it is the css id selector for a paragraph. Delete the paragraph.
Posted at 8:16 am
Sean Callahan wrote on August 23, 2009:
No, I already got rid of that, I am trying to get rid of the link on top of the image…The logo is placed in css, but the link over it I cannot find anywhere…I deleted what I said before but to no avail….
Look:
http://www.websiteconsultants.org/wp-admin
Click my logo and you go to wordpress.org
Posted at 12:34 pm
Phidev wrote on August 24, 2009:
on wp-login.php do a search for “wordpress.com” and you will find an anchor, just replace “wordpress.com” for where ever you want to point to, or just delete the “<a href=….", "” from the file. It’s not that hard.
Posted at 9:17 am
Sean Callahan wrote on August 24, 2009:
Yes, I undertsand that. Did you read the previous comment? The link was an a php echo for wordpress.ORG, I changed it…it still isn’t gone….
Posted at 11:20 am
Doug Cone wrote on September 11, 2009:
Yikes! As soon as you update wordpress you have to go hack this back in. This article shows how you should do it properly
http://wpengineer.com/create-your-own-wordpress-login-design/
or start here: http://codex.wordpress.org/Plugin_API/Action_Reference/login_head
Use hooks and css to overwrite the defaults, then you might have to tweak your theme once in awhile when hooks change but it will be a lot easier to stay on the latest version of wordpress…and that will keep you from getting hacked! (you should never edit a core wordpress file, override it with a hook or filter instead)
To the Author, may I recommend that you point to the link above or update your post? The post ranks well in Google but it is showing people the wrong way to do it!
Posted at 5:51 pm
Addicott Web wrote on September 17, 2009:
Thanks for your suggestions Doug! When I wrote this article I hadn’t anticipated the problem of when you upgrade. I’ll definitely update the article with some of the information that you posted, along with a link to a plugin that I’ve been using that lets you customize the logo, at the very least. Using a plugin ensures against what happens when you upgrade versions of WordPress!
Posted at 11:09 am
Doug Cone wrote on September 17, 2009:
I’d encourage anyone that can’t find a override hook or filter to figure out how to submit what the need into the core, instead of just hacking the core
Posted at 3:16 pm
kilo wrote on September 19, 2009:
adding
html {
height:100%;
}
didn’t get rid of the bottom white space.
i’m assuming i add this into login.css
any ideas?
Posted at 3:14 pm
Matt Belliston wrote on September 27, 2009:
Yes. Also add
min-height:100%;
to the body{
}
section. That worked for me!
Posted at 4:26 pm
Greg wrote on October 1, 2009:
I’ve added both of these and I still get the big white bar.
Posted at 11:51 am
Will Rhea wrote on November 3, 2009:
The white space I get is actually grey tan, but it’s still there.
Posted at 1:01 pm
Trevor wrote on December 14, 2009:
Whew! That was a challenge. Here is how mine turned out, what do yall think?
http://todaysgoal.com/wp-login.php?loggedout=true
Posted at 12:02 am
Mike wrote on May 29, 2010:
Thanks for the tips! The only thing I’m not really digging is that I have a scroll bar on the login page. Not necessary, but I can’t figure out how to get rid of it.
http://www.itsmygallery.com/blog/wp-login.php
Mike
Posted at 1:42 pm