How to Change WordPress Login Page Logo & Background

Did you know you change the WordPress login screen logo and background easily. Just as you have a custom WordPress theme and a unique site design, why should you not have a custom WP login page as well.

By default, the WordPress login screen is same for ALL WordPress blogs and is typically located at /WordPressFolder/wp-admin/. This is how your boring default login screen typically looks like, and probably you visit it everyday.

Old WordPress Login

Now see how our WP login page looks like. Does it not look better!

Custom WordPress login

You notice that we have simply replaced the WordPress logo with our site logo and changed the background color from default light gray to black – and it makes a huge difference to branding.

Custom WordPress Login Page

Here is how we do this. We need to paste the following code into the theme functions.php file. (Note that it is a very powerful file and incorrect code can lead to your site going offline. Always keep a backup of the file, and you can always restore the file back to your WP theme folder vai FTP if anything goes wrong.)

function qot_login() {
echo '<style type="text/css">
.login h1 a {
background-image:url( "http://path/to/yourlogo.png" ) !important;
height: 30px !important; width: 200px !important;
background-size: 200px auto !important;
}
body {  background: #000; }
.login form { background: #333; }
</style>';
}
add_action('login_head', 'qot_login');

What the code simply does is it adds a new inline CSS Stylesheet on the WP login page. The first line replaces the WP logo with your logo and fixes some dimensions (Remember to change the url to point to your logo). The rest of the CSS changes the background to black (#000), and the login form to dark gray (#333) to contrast it. Add the !important CSS code wherever you feel your custom CSS is not overriding the default code. Feel free to experiment with whatever colors look great on your site and match your branding.

Do this today –  It is excellent for blog branding. Why have default WP logo, when you should have your own logo there. Why look like every other site. If you run a multisite blog network, or require multiple users to login everyday … why not create this branded login screen and surprise them today.