Here is how to customise and brand your WordPress Log In Screen for WordPress + (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.
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 Log In Screen Flickr pool.
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.
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.