How To Customize WordPress Login Screen Without a Plugin
Are you tired of the default WordPress Login screen? Would you like to customize the Login screen for your WordPress Website or your customers´? In this tutorial, I will show you how to easily Customize WordPress Login screen, to standout from the crowd, without the need of a plugin. Specifically, I will explain how to replace the default WordPress logo in the Login screen with your Logo or your customers´ Logo for a more professional look and better branding.
What about a plugin?
Yes, there are plugins available that customize the logo on your WordPress Login screen. But I encourage you to read my previous article about unnecessarily adding plugins to your theme. Also, you really don´t need a plugin for such a simple task.
Before | Default WordPress Login Screen
The picture below shows how the WordPress Login screen looks by default:
After | Customized WordPress Login Screen
The picture below shows the customized Login screen for this blog:
How to Change the Logo in WordPress Login Screen
- Create your logo image with the following parameters:
Why? because the default WordPress Logo has these exact parameters.- GIF image format.
- Transparent background.
- Size: 310px wide by 70px height
- Image name: logo-login.gif
- In your server, browse to the “/wp-admin/images/” folder, find and rename the existing logo-login.gif to logo-login-default.gif. You can skip this step if you like, but it is better to rename it in case you need to revert back to the default.
- Upload your own customized GIF image logo that you created, to your WordPress image directory (/wp-admin/images/).
- Refresh your WordPress Login screen and voilà! the login screen will now use your own logo.
If you like, you could also modify the CSS file related to your WordPress login screen called login.css. This file is located in your Web server in the folder: “/wp-admin/css/”. For example, if you want to create a PNG image format for your Logo instead, or other styling that you like to do…
UPDATE (Nov. 3, 2011): In WordPress version 3.2.1 (and later I assume) the existing image´s extension has changed to logo-login.png and the size has been reduced to (274px wide by 63px height). Therefore if you are using WordPress Version 3.2.1 make sure that your image extension is now png and not gif. The image size will not matter, you could keep it as (310px wide by 70px height) if you like.
Am I going to Lose my changes the next time I upgrade WordPress Version?
The answer is YES and NO.
If your WordPress version is < 3.2: then the answer is YES. In this case, your Logo image file will be overwritten with the default one. Also if you did any changes to the login.css file, it will also be overwritten. Make sure to keep backup copies.
However, if your WordPress version is >= 3.2: then there is a excellent chance that you will lose nothing, unless you decide to do a complete version upgrade. Since WordPress version 3.2, the update system supports incremental upgrades, meaning that only modified files will be updated. Read WordPress 3.2 reference.
Your Turn to Talk
This tutorial shows how to easily replace the default WordPress logo in the Login screen for better branding and for a more professional look. How easy did you find this tutorial to implement? Do you have something to add or anything else to say? If so, please share your opinion in the comments section. Your opinion matters, unless it is a Spam.
Great article – will this technique still work with the stealth plugin enabled ?
Thanks Kevin.
I am not sure if this works with the Stealth Login Plugin, I guess you have to try it out.
Where in Web server can I find the login.css file in wordpress version 3.4.1?
[...] a previous tutorial, I showed you How To Customize WordPress Login Screen Without a Plugin. In this tutorial, I will show you a different and better approach to do [...]
Do you have any suggestions on how to customize the log-in to this extent? http://www.thetomkatstudio.com/wp-admin
Hi Tony,
If you are familiar with CSS, that’s an easy change. You need a larger background image for that div and you need to modify the CSS file that I mentioned in the tutorial.
Boutros.
Easiest tip I’ve seen on this. Thanks!