David Airey is an independent graphic designer working with companies of all sizes since 2005.

Customize your WordPress login

WordPress admin screen

I know that many of you are web designers / developers in some shape or form. I also know that more and more clients are integrating WordPress blogs into their web projects (although it’s something I’ve yet to do for a client).

One aspect of the design that I would’ve overlooked, had it not been for Ayush Saran, is the WordPress login screen.

If you have a WordPress blog, then take a look inside your wp-admin / images folder. You’ll notice two .gif files titled:

login-bkg-tile.gif
login-bkg.bottom.gif

These two images make up the look and feel of your WP admin screen (where you login), and if you click on the two files above you’ll see how I’ve branded mine with my logo (I had to use transparency for the bottom section so the graduation shows correctly).

It’s the little things that make all the difference when you’re dealing with customers. If you’re launching a WordPress blog for a client I’d highly recommend making this small, yet important, inclusion. This comes into even greater focus when more than one person is accessing the admin screen, whereas I’m the only one who updates my own blog so it’s less important for me.

Update: June 2008
This tutorial was published for WordPress versions prior to the 2.5 release.

Do you have any examples of your own WordPress login screens?

My second book on Amazon

Related posts

83 comments about “Customize your WordPress login”

  1. Aww – that sucks. I have just started a post about this that was going to go in my WordPress Tips and Tricks series :(

    I actually had something slightly different in mind so will probably finish it up anyway – maybe you can post about my post then :)

    FWIW the post itself is good. I just need to do something better

  2. I recently recolored my backend and made a WordPress admin skin of sorts. I only changed the CSS, because I didn’t want to touch anything important, yet.

  3. Don’t let me stop you, Ben. It was through your 9rules note that I saw Ayush’s article, so I should thank you for the indirect signpost.

    Connor, I like your subtle changes to the back-end. As I commented on your article, I once tried out the Tiger Admin Panel, but in the end reverted to the standard as it suits my needs.

  4. I had never thought about designing my wordpress login page, but its a good idea especially if you make a login easily available to readers. As you suggest this would be very good for wordpress as a CMS, which I am very interested in finding more about. If you do end up using WordPress for a client I’d love to hear how you get on.

  5. Nice tip David – I’ll have a try at this, this weekend. Just need to remember the modified files next time you upgrade WordPress.

  6. Well, David, I’m clearly no graphic designer, but I love teaching myself new things, so gave it a whirl. This was the result:

    http://lenski.com/wp-login.php

    Thanks for the cool information!

  7. David – I did wonder if it was the 9rules thing that got you started :) I did have a slightly different idea for my post about this so will still finish it up.

  8. I look forward to the post, Ben. Sorry if I stole your thunder.

    Tara, if I go ahead with WP for a client I’ll be sure to let you know.

    Aaron, that’s a good point. I hadn’t thought about the image files being updated with a WP upgrade, and wasn’t actually sure if they were.

    Tammy, nice job. ;)

  9. Oooh fun!! :-D I’ll be doing this for clients from now on. Thanks for the idea David. Here’s my example: http://shonnielavender.com/blogcoach/wp-login.php

  10. You’ve got a pretty cool looking login box there David! I wish I could show some examples of what I’ve done, but in the past when I integrate a blog into a website I put it all together under a global login, as part of the CMS backend as a whole.

    If I’m approached purely to design a blog then I’ll make sure to remember to customise the login screen too ;)

  11. Cool, nice tip. I am planning on tweaking my theme a bit more these days, and most likely login form will get customized first. Thanks!

  12. Great idea! There are so many little things to customize, I don’t know if I’ll ever be finished! But I think they all add to the user/reader experience (even behind the scenes stuff like that can really add to a client’s impression of the professionalism of your work).

  13. Nice work, Shonnie.

    Ties in well with your colour scheme (and surname).

    Damien,

    Thanks buddy. Keep me in mind when you get that blog only gig.

    Lauren,

    How’s the blog coming along? You’ll soon get used to the idea that blog tweaks are continuous (if you’re anything like me).

  14. How funny, I’ve just been emailing Tara about that! I’m tweaking my colors right now and having difficulties finding every little place where the bg color is defined. I’m not sure what’s going on and I’m a pretty savvy web designer. There are many, many styles defined in the CSS file (and maybe some are superfluous?).

    My goal is to have the tweaks done by this weekend and then to outline and write at least a few articles. I want to be live in two weeks, but don’t hold me to it! Maybe publicizing my goal will make me stick to it :) Thanks for your interest!

    AH!! Just got it. The designer used a BG image instead of a color!

  15. This is a great way to add a little more personalization to WordPress. I’m going to try this out for sure.

  16. Lauren,

    Great news. I’m looking forward to reading your first blog in two weeks from now, and not a day later. ;)

    There could be some superfluous lines of code within my CSS file, following all the tweaks, but my loading time isn’t bad so it’s not a priority now. Something I should look at though.

    Baron, Sujan, you’re more than welcome.

  17. Thanks for sharing this tweak David- I had no idea you could change the login page. It is definitely the small things like this that can set a designer apart from the rest.
    Lauren’s finally starting a blog! That’s great. She’ll have instant readership as she seems to have already made lots of friends online.

  18. Haha, thanks Randa! It seems there are quite a few people interested in seeing my blog. I hope I won’t disappoint!

  19. David, that is fantastic before and after shot of the WordPress login screen. Unfortunately now that I’ve seen it, I want to do it also. Curse you David….you’ve just added another thing to my very long to-do list. :)

  20. This is such a cool customization! Thanks for sharing!

  21. Randa,

    I too think that Lauren will have an immediate readership. She’s been great at commenting on other blogs (something I didn’t do for a while even after I launched my blog).

    Bret, J David,

    Glad you like. If you do similarly I’d love to check out your login pages.

  22. Ah great tip, just starting on WordPress project for a new client this week.
    Jamie

  23. Wow i did’nt know you could change the wordpress login, I am doing to have to change mine. Thanks for posting.

  24. Very good and I guess if you have many blogs you instantly know which one you are logging into, but , really, is it needed seeing viewers would not see this screen normally?

  25. I have yet done this but have created a few websites for clients so I must do this from now on.

    As you say a small thing but it is usually the small details that make the difference, as it makes you look that little bit more professional.
    Do you also change the admin WP logo as well???

  26. Jamie,

    I’d love to see your project when it’s complete.

    Michael,

    You’re very welcome.

    goldcoaster,

    The point is that your clients see it when they login to the blog you’ve set up for them.

    If you’re launching a WordPress blog for a client I’d highly recommend making this small, yet important, inclusion.

  27. Good point, Jermayn.

    The WordPress logo that sits at the bottom of every admin screen can be found at this location:

    wp-admin/images/wordpress-logo.png

    It also links through to the WordPress website so you might like to change the link too.

  28. I think all these customisations would be helpful and keep the identity going.

    I have seen one website use adwords in their admin section, please no one do that :(

  29. Well, I did it. I changed the GIF images that create the admin login for my site — thanks to David. Not anything to radical. I decided to just maintain the title text and font style from my banner image so things were consistent. Thanks for the tip David.

  30. Good on you, Bret.

    Your link leads to a 404 error page, but glad you found the tip of use.

  31. Thanks for the heads-up on this David. Now I just need to find the tips to remove all the extra information (WordPress announcements and the like) in the Dashboard that just seems to confuse clients.

  32. Hi Leah,

    Let me know if you succeed. That’s a good idea for client projects.

  33. Great tip David. I’ve been doing this for awhile on Kineda: http://www.kineda.com/wp-login.php

  34. This is quite a good idea. I thank you for the tip. You Can see it in action Over at Pixl Design.

    I do however have one small thing. The Logo on the login page, so you think that it, or the logo on the home page of Pixl Design is better, as i cannot make up my mind.

    Thanks again.

  35. Great idea and just too simple to have that idea on your own – thanks for teaching us, David!

    You can see my version up at Symbian60.mobi

  36. Thanks for posting your examples. Always good to see how others are getting on.

  37. Personalizzare il login di WordPress…

    Sul suo blog, David Airey riprende un interessante articolo apparso qualche tempo fa sul blog di Ayush Saran, nel quale si analizza un aspetto poco noto di WordPress, ovvero la possibilità di personalizzare la schermata di login del proprio blog.

  38. Very nice idea :)
    My version is available at my blog: Capitano Uncino

  39. Where is the plugin version? :)

  40. any idea on how to get the news and events from dashboard off???

  41. As you may have noticed from the trackback above, Binary Moon now has a plugin version (so your changes don’t get overwritten when you upgrade) and a .psd template to make editing the images easier. Thanks for giving me the inspiration to do something I have been meaning to do for a long time.

  42. Jermayn,

    I’m not sure about the news and events, but it’d be worth looking into.

    Andy,

    Thanks for commenting. I’ll be mentioning Ben’s blog article pretty soon. His plugin is a great idea.

  43. I modded mine to give it a bubble look.. nothing to fancy

  44. I checked yours out, Travis. Nice job.

  45. Hi,

    good tip. Thanks for sharing.

    I don’t know if the trackback will reach you properly, so just in case I’ll leave the link here as well. I wrote a post, which extends your tip a bit. – “Having fun with WordPress login. Box or not.“.

  46. Leonid,

    You’re very welcome. I’ve visited your blog and left a comment.

  47. I just found this post, great stuff. Here’s my EG.

  48. Thanks Nic, I like your customised version.

  49. Thanks David, great blog, and thanks for visiting my blogs. Much appreciated!!

  50. Finally got around to do a customised login screen for WP

    http://www.phillipwrayracing.com/index/wp-login.php

  51. Nice job, Jermayn. Keep it up!

  52. I just stumbled on your site. Here is what I did with mine, although I didn’t use your tutorial. ;)

    http://www.ericnovak.com/wp-admin

  53. Good on you, Eric. I’d not have had any idea how to do this if it weren’t for Ayush.

  54. How about the logins that are just a white box? Mine for example doesn’t have any login.bkg image.

    Any suggestions?

  55. Dvid, what happened to your customized login? Thanks for the tipe; I’ve just done the same.

  56. Harris,

    You could always lift that image from the original WP download.

    Johno,

    Mine was reverted to the original after my last upgrade. Should’ve used Ben’s (Binary Moon) plugin. ;)

  57. Hello David,

    I have released more flexible version of customizing wordpress login and registration. These are template files that can be fully customized without touching the core file (wp-login.php).

    You should give it a whirl!

    Read about it at my blog.

  58. Nice post :) Well Ive designed my own wordpress login. Address above.

    Tell me what ya think? :D

    Regards:D

  59. Great tips and fine examples (from the ones that worked). Thanks David! Thought I’d leave mine here, too. Click my name (or go to http://timkissane.com/) and choose login. Peace.

  60. That’s a nice little touch there. I’m definitely going to adjust mine too when I finish my theme.

    Did you remove you’re custom one David? It’s not displaying for me.

  61. Hi Jesse,

    I didn’t update mine after a new WordPress install. Ben at BinaryMoon created a plugin that would keep your new design after a WP upgrade, if that’s of use?

    For me, it’s less important, but I’d certainly keep it on a client blog.

  62. Nice. Just did that for a site of mine.
    Was searching for a plugin, but this is a lot easier.

    Thx :)

  63. Stefan,

    No worries mate.

    Mike,

    The less plugins the better, I agree.

  64. Yep, Stefson is right, why do you need an extra plug-in for something so simple as changing a couple of files? Hard code it and save bandwidth and server resources.

  65. hi! I’m so glad to find your blog. I’ve been wanting to change WP login but I didn’t know what to do and didn’t know it’s possible until I read your entry. Thank you for this very useful post David!

    Because of your post I have customized my hometown’s login page http://www.sibale.amorfrancis.com/wp-admin

  66. Hi David, thanks for that. It’s something I’ve seriously overlooked when building my wordpress themes.

  67. Hi David,
    I have customized the login page for a client Blog.
    http://www.lajedo.com.br/blog/wp-admin
    Greetings from Brazil.

  68. Amor, Mauricio,

    Nice work guys.

    Aaron,

    You’re very welcome.

  69. Good tip, thanks. I want to use it for a new site I am working on. Its gonna be a WordPress Plugin that people need to sign up to use, and I have been working on implementing WordPress’ own user-management as a way to control the members signing up.

    This is gonna help me brand the login-page, giving it a better “feel.

    Thanks again :)

  70. wasn’t planning on changing the log-in page however after seeing this article it inspired me to change the one on the blog i run. I have had a good go at it and think that the result is really quite amazing it gives the log-in page a much better fitting with the rest inspiring blog :)

    the log-in page is here if you’d like to see it: http://sallyandrew.findhornpress.com/wp-login.php

  71. Nice work, Adam.

    With the continuous WordPress updates, I tend not to bother now, but it’d be a different story if I was creating something for a client.

  72. for client works we usually make the login pretty http://ultigifts.com/wp-login.php or this http://thousetagaytay.com/wp-login.php (v.2.3.1)

    Wish there was a plugin for this. In WP 2.7.1 though you simply have to change the logo-login.gif.

    Thanks for the post David.

  73. No worries at all, Dave.

    I’ve not tried it with WP 2.7.1, but if I was ever to do so for a client, I’d dabble again.

  74. David,

    Did you change the style of the login text (“Username”, “Password”, “Register”, “Forget Password”)? I’m having the hardest time figuring out who is defining the styles for those.

  75. Dan,

    I didn’t. All I changed was the image behind the text.

  76. Tip for all!
    Wordpress Codex deals with this issue with the basics.
    http://codex.wordpress.org/Plugin_API/Action_Reference/login_head
    There’s the link for it, a safe way to start.

    Challenge to all!

    Make a custom login using wp-login.php code, add it directly to your site and then redirect them first to your home page. Then make custom wp-admin page.
    Actually I have reveal that I’m working on a solution like this, everything else is working except the redirect.

  77. Thanks for the post. I was wondering how to change up the login page. Your website has been most helpful.

  78. So… just curious why your wp-login looks like the stock version with the WordPress logo?

  79. As mentioned in the post, neonon, this is for WordPress versions prior to the 2.5 release.

  80. I am customizing a Community website. Is there a way to edit (remove) the “Log in” link that appears at the footer of the lost their password page?

  81. Sorry Jim. I don’t know. Good luck.

  82. WordPress logo customization problem.

    Hello David, I was going too say that I am getting a 404 when clicking on your gif files but I think I know what I have done wrong. Great website.

  83. Hi Marianne, I’ve just removed those links as they were out of date. Thanks for the prompt.