Did you know you customize the WordPress login screen logo and change background easily with custom CSS. 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.
Default WordPress Login Page
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.
Now see how our WP login page looks like. Does it not look better!
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. It immediately wows the visitor and makes them curious about the website.
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 image and remember to sharpen your logo for 4K screens as well).
- The rest of the CSS changes the background to black (#000), and the login form to dark gray (#333) to contrast it. Add the
!importantCSS 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 multi site blog network, or require multiple users to login everyday … why not create this branded login screen and surprise them today. If you want to change logo only, you can access the WP installation and edit the WP logo image via FTP as well.