The WordPress admin login page is very easy to customize. With the code below, you can add your own CSS to the login page and make it look however you like. Check out the new Pro Blog Design login to see it in action.
Best of all, your customizations are all done in your theme files, so the changes will stay when you upgrade WordPress.
This is the first in a series of WordPress Hacks posts. The code is all done by Milo, and then written up into a blog post by me. There will be a new hack released every Thursday!
1 – Edit Functions.php
Your theme may or may not have a functions.php file in it already. If it does, paste the code below into the bottom of it. If not, just create a blank file in Notepad and save it with that name.
And remember not to leave any space before or after the <?php and ?> tags as you do this!
1 2 3 4 5 6 | <?php function custom_login() { echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/custom-login/custom-login.css" />'; } add_action('login_head', 'custom_login'); ?> |
2 – Edit Your Theme Files
We will need a place to store your new CSS styles and any images you might use. Seeing that they aren’t part of the main site, let’s create a new folder for them.
Create a folder in your theme’s folder and call it “custom-login“.
And inside that folder create a new stylesheet called “custom-login.css”.
3 – Add New CSS Rules
The custom-login.css file will be loaded each time your login page is loaded. That means that any rules you add here will be applied to the login page.
If you add new images, you can store them in your custom-login folder.
However, if you want to re-use images from your theme, just use CSS rules like the following to use the image from your theme’s images folder (That way, your browser won’t need to download the images again as it will already have them cached).
1 | html {background:#17272d url(../images/pbd-body.jpg) 0 0 repeat-x;} |
A Simple Template Example
The following is the stylesheet I’ve used to create my new login form. It is very, very simple, but it does the trick nicely. I’ve commented it, so feel free to adapt it and use it on your own site.
1 2 3 4 5 6 7 8 9 10 11 12 | /* Custom Login Styles */ html {background:#17272d url(../images/pbd-body.jpg) 0 0 repeat-x;} /* Page background. Can't use the body tag for this! */ h1 a { /* Title image (The "WordPress Logo"). Remember to update the height and width your image's dimensions */ background:url(../images/pbd-title.png) 0 0 no-repeat; width:415px; height:70px; } body.login {border-top-color:#dff4fc;} /* Top bar background color */ .login p#backtoblog a:link, .login p#backtoblog a:visited {color:#17272d;} /* Link effects in top bar */ .login p#backtoblog a:hover, .login p#backtoblog a:active {color:#17272d;text-decoration:underline;} /* Rollover link effects in top bar */ |
More Advanced Customizations
Of course, you can do a lot more than that. If you check out the screenshot below of a site Milo created for Intellivative, you can see that she’s modified the design of the login form itself, just using a few more CSS rules.
You may find it useful to check out the default WordPress login stylesheet as well. You will find it in /wp-admin/css/login.css and some of the colors will be set through /wp-admin/css/colors-fresh.css (Unless you changed the color scheme in your admin panel, in which case it is colors-classic.css).
If you update your login form, let us know in the comments and I’ll collect the links here!
Update: Andi Saleh has created a great login page with this technique.
Update 2: Andrea from WPMU Tutorials has turned this into a plugin for all your WPMU users out there!
WordPress Hacks Series: The code in these posts was written entirely by Milo, a web designer from Oxford, Britain. Check out her website for free WordPress themes and her blog, or follow her on Twitter!
Custom Search
John (Human3rror) (9 comments)5 February 09
killer!
Static (3 comments)5 February 09
Awesome tip.
Completely forgot that this should be editted too when you’re going fo a real complete look. I wonder if we’ll start seeing more of these little additions in premium WP themes…
Anthony Parkes (1 comments)5 February 09
Excellent post – will try to implement on my blog, it shows professionalism.
Thanks for the great tutorial!
Anthony
Andi Saleh (1 comments)5 February 09
Great, indeed…! Thanks for sharing this excellent tip!
I just updated my login page, making it match the main design. What do you guys think?
And can someone please let me know if the style breaks is Opera and Safari. I haven’t tested it there yet.
Will be waiting for more great hacks. Keep em coming, guys!
Patience Newman (2 comments)18 May 09
Love the login design… Very Inspiring
Tony Naccarato (1 comments)5 February 09
This came in a timely manner. I was just looking into this. I wondering if you will do a post or if anyone know how to fully integrate the register and login into the site, such as http://ugaf.org/login/?action=register
Fikri @ Bloggingly (1 comments)6 February 09
Awesome. i lost for words
Keep posting a good post like this guys
Free Blog Directory (1 comments)6 February 09
Thanks for the tips. Hopefully, I can make my blog look as professional as yours
JohnONolan (1 comments)6 February 09
Brilliant! I’ve been wanting to do this for ages and was going to just muddle through it myself, but now I have your well written article for guidance! Thank you!
jennifer farley (1 comments)6 February 09
Thank you very much. This is extremely useful.
Tuan Anh (2 comments)6 February 09
Thank you for the article. It’s simple but very useful
. Changing CSS of the login page will make our blog more personal, and usual people don’t reconize this is a WP blog 
Big Slick Design (3 comments)6 February 09
Thanks a lot. This will definitely help when I move to a hosted solution.
Currently I’m running off of Blogger, and although it is a good service for the price (free!) customization is not exactly top notch.
I’ll be subscribing to your feed
Penny (3 comments)8 February 09
Awesome tip!
Web Design Beach (28 comments)8 February 09
Great tip indeed ! First time i have such a wp mod is possible. And i think it is really good for overall site branding.
Michael Martin (1286 comments)8 February 09
Glad you all enjoyed the post! I’m agreeing with everyone here, it really does take your site that little extra step towards being fully your own.
Static,
We might well do! Any little advantage I suppose.
Andi,
That looks brilliant, I’ve added the link to the end of the post now. Thanks for sharing!
Penny (3 comments)8 February 09
@ Andi, the design doesn’t break in Opera. Looking great.
Snake (14 comments)9 February 09
It looks very nice, i will try to do it =).
Thanks
Lee Munroe (7 comments)10 February 09
Nice tip Michael. Adds a nice finish to a client’s site
Dainis Graveris (9 comments)10 February 09
huh, looks like – I can do something about it too, thanks for the tips!
Crazy Oldie (3 comments)10 February 09
thats awesome! the steps are easy to follow and appreciated!
ponie325 (1 comments)11 February 09
great work!
learning to do it!~~
Tracey Grady (14 comments)11 February 09
This is one of those things that you know you’re going to need to know how to do sometime soon and you expect you’ll do a search on Google when the time comes … now I don’t have to! Thanks Michael – this one’s going straight to delicious etc.
Farid Hadi (15 comments)11 February 09
That’s a great tip! Thanks!
Technology Blog (1 comments)1 March 09
That’s really awsome!
It’s beneficial for the blog having multiple authors. Do you know about changing the way the user register on the blog?
Usually WP sends randomly generated password to the users email , sometimes that may be frustating. Is there any way thru which they openly choose their password while registering.
Please if possible mention that also.
-Mohit
SEO Preston (3 comments)5 March 09
We use wordpress for all our website and clients websites, and this is something which we didn’t really bother to do. It’s surprising how much it finishes the website off. Your post is really easy to understand seems very simple and will finish the website perfect.
Ben Lind (2 comments)7 March 09
Thanks for the really great post! I never knew that you could edit the login page like this – it makes for a nicer user experience, for sure.
After reading your article, I updated my blog’s login page, which you can see at http://www.tutwow.com/wp-login.php.
Thanks again!
Web Design Blog (2 comments)15 March 09
This is something I’ve been doing for a while on client sites that are running on WordPress. It makes the site look that much more polished.
the12 (2 comments)20 March 09
Hye Michael, can u look at my login page http://missmully.lovesylph.com/wp-login.php.. something wrong at wp-login.php.
what must i do?
“Warning: Cannot modify header information – headers already sent by (output started at /home/lovesylp/public_html/missmully/wp-content/themes/pinkswirls/functions.php:9) in /home/lovesylp/public_html/missmully/wp-login.php on line 255
Warning: Cannot modify header information – headers already sent by (output started at /home/lovesylp/public_html/missmully/wp-content/themes/pinkswirls/functions.php:9) in /home/lovesylp/public_html/missmully/wp-login.php on line 267″
Michael Martin (1286 comments)20 March 09
Hey,
The error is probably in your functions.php file. Have you copied the code over completely? (Might have left out a word or 2 at the end somewhere?).
If you don’t spot anything, email it to me (michael at this site’s address
) and I’ll take a look at it just to double check and be certain. I’ve made every error possible with these files in the past! 
the12 (2 comments)20 March 09
i can’t spot anything wrong.. i only copy paste the original code from above.
i’m using wp 2.7
Pablo (1 comments)24 March 09
Hi,
I have the same error above as the12 and was wondering if you two had an luck resoling that problem? Thanks!
Web Designer (1 comments)26 March 09
This is really very nice idea. But if you would like to have a professional website, such solution is not good to you and your company. I hope it is easy to understand why.
John (Human3rror) (9 comments)5 April 09
quick question.. how do you get the nice stylized “code” areas?
Michael Martin (1286 comments)5 April 09
Hey John
I’m using this plugin: http://wordpress.org/extend/plugins/wp-syntax/ – Works a charm!
anmari (2 comments)18 April 09
A correction – you probably should use bloginfo(’stylesheet_url’), not the template url?
anmari (2 comments)18 April 09
Sorry I mean stylesheet_directory
Tadd Mencer (1 comments)12 May 09
This is stellar! I have a client that will be using WP and this is exactly what I need and want for their log in screen!
Tadd Mencer’s Latest Post: When life gives you lemons
Patience Newman (2 comments)18 May 09
Great Tutorial… I be using it soon (I hope)
Tracey Grady (14 comments)23 June 09
I just wanted to note that this works really well if you’re replacing the default Wordpress logo image with your own logo image file, but it doesn’t work if you’re using HTML/CSS to create the typography for your h1 header title. In order to make that work you have to make changes in wp-login.php and login.css in the wp-admin folder … but you would probably have to make those changes all over again next time you upgrade Wordpress.
So if you have created your site with a h1 header title using tags and CSS styling, then in order to achieve this customised login page you’ll have to create a separate image file to replicate the header title, then follow Michael’s instructions with your new image file.
Hope that all makes sense.
Adam (18 comments)10 July 09
http://www.tripst3r.com/wordpress/wp-login.php
It is really easy, and works super well. My custom log in link is above!
Dave (15 comments)11 July 09
Is, there a way to center an image?
I follwed the code that you have here. but then i turned around and decided to create an html page index.html
I can see the text fields to enter username / password but the box doesn’t form?
When, I click on loss password the hacked version that I did from here shows, but the image isn’t the same size what i’d like to do is click on lost password, and the same page from the main page loads up the same way and you can enter your email or user name and you will be sent the password but when I log in, and try to see the main site, it boots me to the login site any reason why? how can I get pass it?
reezluv (1 comments)11 August 09
really nice and killer tips..great!
Nits (6 comments)2 September 09
I find some nice article on the website design which infact great help for all webmaster like me.
Neotech-r3 (1 comments)10 September 09
Nice information xD..Keep share.
Jason Saggers (1 comments)16 September 09
I receive functions.php errors when I try to login.
All I want to do as add a full page background image behind the login area.
I have tried many different plugins but can’t get this basic thing to happen.
Lucrative Investing (5 comments)10 October 09
If you customize your login screen to make it match your site better I would advise anyone to also customize the login url to something other that wp-login for security reasons. There is even a plugin out right now that is call WP Hide Dashboard that can also help manage what you show people that you allow access to your backend as well.
Short Jokes (1 comments)25 October 09
Thanks for the informative article on Wordpress custom theme
Tom Bathgate (1 comments)27 October 09
This is a great article and really useful, the only problem is left is that if you change the logo to your own logo, the logo still links to wordpress.org
Any ideas on how you can overide?
Hans (17 comments)5 November 09
so expert for me, but, i will try for that… nice tutorial, BeD-BoY
Brendan Wenzel (2 comments)12 November 09
This is something that I never considered possible until I just stumbled upon this article. Great tutorial and thank you very much for showing me this.
Andre (3 comments)19 November 09
Great tip, this is just what I was looking for!
Thanks,
al (11 comments)21 November 09
I tried it and i just got a blank screen. Then I took out all the code now when I try to log out I get a blank white screen. please help
this is my site http://www.cac-tv.com
Thanks!
al (11 comments)21 November 09
This is really bad can you tell me how to get my login page to work again?
Rosario (10 comments)1 December 09
Thanks for the really great post
Pete (2 comments)11 December 09
ahhh.. I copied/pasted the first bit of css at the end of my functions.php… and it completely destroyed everything… I can’t log in… I can’t view the blog… nothing……. this is the error i receive when I go to my site:
“Parse error: syntax error, unexpected $end in /home/nctrnlk1/public_html/blog/wp-content/themes/atlantica/functions.php on line 130″
please HELP!
Website Development (1 comments)11 December 09
Splashbox is an online marketing company with 20 years industry experience. We specialise in Search Engine Optimisation (SEO), online marketing and website design. Our team is made up of successful, business-minded individuals who are passionate about design and understand the importance of achieving a strong market presence and providing a sound return on investment. Our strong business acumen will always find a balance between eye-catching designs, cost-effective and profitable solutions.
Jerick Mac (1 comments)16 December 09
wow! thanks for the idea. Ill try to modify my wp login too. hehehe.
spartax (1 comments)17 December 09
nice tutorial,, thanks for the directions..
,
Chris Mower (1 comments)18 December 09
So, what happens when you update WordPress to a new version? Do you have to redo the work each time?
Adam (18 comments)18 December 09
The problem is that often after update wp version our changes may not work. There is plugin – register plus – has also posibility to change login screen.
ReviewsandUpdates.com (1 comments)19 December 09
Thanks for sharing the helpful tip.
pgb (1 comments)25 December 09
Thanks for the article. All visitors are sent to the login page while we still develop the site but here’s our login page: http://pinoygossipboy.ph/wp-login.php .
WP Tricks (4 comments)28 December 09
I will tried it on my site… this is great custom, specially for multiple author blogs.
jss (1 comments)2 January 10
hey, it’s cool!
please tell me how to completly remowe the top bar (“<- Back to [blogname]")
internet marketer (1 comments)3 February 10
Hey JSS, I think pgb used this code in his site:
.login p#backtoblog a:link, .login p#backtoblog a:visited {
display:none;
}
now that won’t “completely remove” the link, but just hide it in plain view. Meaning you can still see the element if you view the page source.
-Joe
Matt McGuire (1 comments)11 January 10
Get article. Thanks for sharing the info. I want to take this a bit further. When someone logs in I want them to be redirected to a specific URL. I found one plugin that does that, but as soon as you go back to the /wp-admin.php page it does not redirect you. Any ideas how to make that happen? Basically I want “clients” to login and be redirected to a page I set up for them. Each client has a separate page.
zplits (1 comments)12 January 10
My comment was deleted.
Naveen (1 comments)17 January 10
Hello
I did everything you recommended and it still does not work?
I have Wordpress 2.9.1.
Naveen
Texas Medical Transcriptioniption (3 comments)21 January 10
Good designing techniques you are using. Thanks for sharing this knowledgeable thing. These will help us
Brandon Grainger (1 comments)27 January 10
Thanks for all your work on this. It was nice to learn how to do this without a plugin.
Juri (1 comments)3 February 10
Brilliant! Thanks!