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.
sponsored message
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.
To change the logo from the WordPress logo to your logo
- 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.
- 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. - 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)
- Open the colors-fresh.css file which is also found in your wp-admin/css/ folder.
- 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)
- 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.
sponsored message
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.
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.
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.
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 🙂
There’s also a plugin that does this nicely:
‘Branded Login Screen’ Plugin
I haven’t tried it myself but the big advantage of the plugin seems to be that you won’t need to modify css files with every upgrade.
Jacob Share’s last blog post..Group Writing Project or Blog Carnival Debate: What’s the Difference?
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”.
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.
a small functions is enough for custom login with all css and images in the activate theme, see http://bueltge.de/wordpress-25-und-theme-definiertes-login/617/
Frank’s last blog post..Spam Wahn via Trackback
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
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
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
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
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.
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.
Rajat,
Why do you need 3 separate body sections in the same post? If you want to differentiate 3 separate sections, just create breaks between each body, or add a break line image or something.
Brian Yerkes’s last blog post..Logo Composition (Part 1) – Format
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
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?
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.
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
ohh very easy way … thnx for sharing
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?
It is a highly customised Rhea theme by BlogOhBlog.
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
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 🙂
nice. exactly what i was looking for.
Jacob, you are expert with wordpress functionalities.
Thanks, just what I was looking in the last 2 weeks! And clearly written.
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.
Jacob, love your articles, thumbs up.
Your variant is not good, because if you will update core, than your code will be lost.
Use this one code instead:
http://wordpress.org/support/topic/change-login-picture
add_action(“login_head”, “my_login_head”);
function my_login_head() {
echo ”
body.login #login h1 a {
background: url(‘”.get_bloginfo(‘template_url’).”/images/logo-login.gif’) no-repeat scroll center top transparent;
height: 90px;
width: 400px;
}
“;
}
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.
oops, you updated core files, and the WP logo is back!!
Next time make a add_filter in your functions file!
We did this on our website as well! Just took a few hours of custom CSS and a few tidbits in Photoshop… check it out live http://www.destinyislands.com/wp-login.php
We do a lot of WordPress designing but often leave out the login page design. This is definitely a good tutorial.
Hi Jacob,
Really nice article regarding changing the log page of word press site. love to be here again.Keep it on with this type of post.
I have created a plugin which does the login page customization and also a little more like changing the default url etc without making much php calls unlike other plugins. This the plugin which I use for my client wordpress sites.
Plugin Name: My WordPress Login Logo
http://wordpress.org/extend/plugins/my-wp-login-logo/
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.