How To Customise Your WordPress 2.5+ Log In Screen

How To Customise Your WordPress 2.5+ Log In Screen

Just Creative is supported by its audience. When you purchase through links on our site, we may earn an affiliate commission at no extra cost to you. As an Amazon Associate we earn from qualifying purchases. Learn more

Wordpress 2.5 LogIn Screen

Here is how to customise and brand your WordPress Log In Screen for WordPress 2.5+ (and probably many more versions to come). If you are running an older version of WordPress you may want to check out this post. You may also want to check out the live demo of my log in screen here.

This post comes after updating my WordPress to version 2.5 and losing my old custom log in screen. Just a word of warning, I am not the best tutorial writer and this tutorial is for an intermediate to advanced user of WordPress.

Update:

There are also 2 WordPress plug ins available which can customise your WordPress 2.5 log in screen.

  • WordPress Custom Admin Branding – This changes the log in screen, as well as the logo in the header and footer of your admin panel.
  • Branded WordPress Log In Screen – This is a plugin that brands only the log in screen.
  1. Login to your site via FTP or your preferred method and locate the file ‘login.css‘ which is found in your wp-admin/css/ folder. Open this css file in your favourite editor.
  2. In the login.css file look for the line:
    background: url(../images/logo-login.gif) no-repeat;
    and change it to your own image for example… background: url(../images/YOURLOGO.gif) no-repeat;
    NB: You will probably want to make the logo around 290 pixels wide.
  3. For the more advanced users this is where you can customise the look of the login anyway you like using CSS which I know you will. I just changed the fonts to Helvetica to match my site.

To change the colour of the background (ie. the baby blue colour)

  1. Open the colors-fresh.css file which is also found in your wp-admin/css/ folder.
  2. Locate the TWO #eaf3fa colour’s in this file and replace them with any colour you like. I would recommend a light washed out or neutral colour. I chose my site colour which is grey. (#EAEAEA)
  3. Don’t stop here, you can customise your log in screen as much as you like! Mine was just a quick example.

Just a note to remember to backup these two CSS files (colors-fresh and login.css) before you do any WordPress updates as these updates will overwrite these files and you will have to do it all over again!

Once you have finished, upload your login screen to the WordPress 2.5 Log In Screen Flickr pool.

Why?

This is a a very simple and effective way to customise and brand your wordpress login screen… It would be very beneficial for web designers designing for clients as it’s the attention to detail in your work that makes all the difference when you deal with your clients.

If you have designed a wordpress blog for a client I would highly recommend making this small, yet important, inclusion. For myself, it’s not as important as I am the only one who writes on this blog, however for those with multiple authors it surely is a must.

sponsored message


You also may be wondering about what that OpenID log in is? You should definitely read about it… you will regret it if you don’t.

You may also want to check out WordPress Plugins You Must Have or the Ultimate List of Blog Heading Templates & Titles for Blogging. Also don’t forget to subscribe if you haven’t already.

If you have any questions (and I am sure you will) please let me know.

52 thoughts on “How To Customise Your WordPress 2.5+ Log In Screen”

  1. That has got to be the quickest comment I have ever seen. Glad to be of help, it did take a bit of digging around in my source code to figure out how to edit the WordPress log in screen but it is was well worth the effort.

  2. Nice article, I also happen to change WP login screen with clients logo or name, it gives a nice effect and probably makes client happy 🙂

  3. Never thought of it, but seeing it being done sure will make me think about customizing the next loginscreen for a client’s blog. Thanks for the “hint”.

  4. Ivan,
    I think it is a great (nearly vital) thing to make the blog more personalised for the client. It looks like you put the extra effort in as well… especially for something that takes less than 5 minutes to do.

    Benjamin,
    I have updated the post providing two great plugins.

    Kontur,
    Your welcome 🙂

    Jacob,
    Thanks for the plugin link, I have updated my post with the link.

  5. Nice post Jacob, I wasn’t even aware that the wordpress login was customizable. This will be a great addition to a blog I have been designing on wordpress that is designed for a community of authors. They will love the surprise when they see the change. Thanks again.

    Vinh Le’s last blog post..17 Resources for Creating a Blog Design

  6. That’s pretty cool, there’s another plugin out there that had the same function but I didn’t give it a try. I’ll try out your way and hopefully i won’t kill mine lol.

    aronil’s last blog post..Not Just Me

  7. One of the great things about wordpress is that it is so open to customization when you host it on your own servers, that you can brand it 100% for others.

    It’s fast becoming a widely used CMS system for web design companies. They are now able to provides clients with an easy to use backend system for their site without much programming.

    The code monkeys of the world are not too happy about it tho! They used to get paid to create these tools. Now, sophistated code like this is open source, power is to the masses!

    Brian Yerkes’s last blog post..Logo Composition (Part 1) – Format

  8. Great advice for people designing and developing for clients.
    One thing that bugs me a bit about your solution is the need to make customization to the core files of WordPress. It would be a more clever way to do this by creating a plugin for it. For WP 2.3 there’s one out there and hopefully the author will upgrade it to fit the WP 2.5 admin screen. Nonetheless it’s a superb way of creating a better experience for editors of a WordPress driven site.

    Benjamin’s last blog post..Artillery Extended Excerpt

  9. No worries Zinni, glad to be of help.

    Modemlooper,
    Yeah it is the small details that count.

    Rajat,
    Maybe my readers could help you there as unfortunately I really could not tell you.

  10. Pingback: Como personalizar la ventana de ingreso de Wordpress 2.5 - Guia Breve
  11. I just wanted to thank you for this article, I was about to research this for client but you have done the work for me Jacob

    zinni’s last blog post..Tips for Design Moonlighting While Remaining Professional.

  12. if you design blogs for people and leave the log in screen the same its like stopping 3 steps before the finish line.

    modemlooper’s last blog post..10 Unusual Bicycle Designs

  13. informative and useful
    I am working on a project where I am trying to modify the admin further – like currently there is post title and body – do you believe another such field can be created like 3 separate body sections?

  14. thanks for this article – im in the process of re-doing my own wordpress hosted blog to my server, and need all the help i can get! very clearly written too.

  15. Pingback: How To: Make A Custom WordPress 2.5+ Login Screen
  16. Pingback: Wp Wordpress » Blog Archive » How To: Make A Custom WordPress 2.5+ Login Screen
  17. Before 2.5 I did a customised login which required changing the two images but this is a lot easier with just changing colours…

    Thanks for the great tut.

    Jermayn’s last blog post..Dreaming Out Loud – OneRepublic

  18. Pingback: Is The New WordPress 2.5 Holding Up to The Hype? | WebBriefcase
  19. Pingback: Random WordPress 2.5 How-To’s :: WPLover
  20. Pingback: WPCandy Logo Login Plugin :: WPLover
  21. Pingback: How To: Make A Custom WordPress 2.5+ Login Screen | [Blog Tutorials]
  22. Pingback: Schweizer WordPress Magazin » Anleitungen CSS und XHTML » WordPress Login Gestaltung
  23. Pingback: 88 Unmissable Wordpress Links: Theme Thursday | Hi, Im Grace Smith
  24. It’s the first time I commented here and I must say you share us genuine, and quality information for bloggers! Good job.
    p.s. You have a very good template for your blog. Where did you find it?

  25. Hi,
    I am having trouble removing the border around the login form.
    I have removed the border: 1px solid #e5e5e5; line from the /wp-admin/css/login.css file, but it continues to appear.
    Could it be because the file referenced is /wp-admin/css/login.css?ver=20081210?
    Has anyone else been able to remove/edit this border?
    Thanks,
    Josh

  26. Pingback: Top 10 blogging tips/articles for new bloggers! | Extreme Trix
  27. Hi Everyone!

    I don’t know if anyone has said it before, but this is not the grestest way to do this, especially if you are doing it for someone else.

    Anything in the wp-admin folder should not be touched because these are core files which will get overwritten by an upgrade.

    You should use a plugin to achieve the effect you want, you can find info on how to do this here:

    http://codex.wordpress.org/Creating_Admin_Themes#Change_Log-In_page.27s_style

    Basically you need to append a stylehsheet to your login page. Once you have done so, you can easily change the login image, it is actually the background of an element, so in your stylesheet:

    #login h1 a {
    background: url(‘path_to_image.gif’)
    }

    That said, modifying the WordPress core files achieves the same effect, it is not necessarily a bad thing to do so if you are aware of the “risks”.

    Hope I could help, and in any case, thank you for the article, I love your work 🙂

  28. Thanks Jacob. I’ve been looking for how to do this over the last hour. My site runs on 3.0.4 though, I hope this procedure is still applicable.

  29. Pingback: Customize Wordpress Login Screen – Project TZ
  30. Pingback: Plugin – “Fast Secure Contact Form” integrated with SI CAPTCHA – Project TZ
  31. Thanks webber for the update – that worked great. This tutorial was great but definitely has the downfall of updating files that will be replaced with every WP upgrade.

  32. oops, you updated core files, and the WP logo is back!!

    Next time make a add_filter in your functions file!

  33. We do a lot of WordPress designing but often leave out the login page design. This is definitely a good tutorial.

  34. Thanks Jacob. I’ve been looking for how to do this over the last hour. My site runs on 3.0.4 though, I hope this procedure is still applicable.

Comments are closed.

[Cyber Monday Deals LIVE!]
[Cyber Monday Deals LIVE!]