Put a smile on your face every time you log in

If you’re maintaining more than one blog at a time, it’s easy to get confused between them and wonder why your login credentials don’t work any longer. That’s why it can be fun (and useful!) to hack the login screen to show a custom image.

The easiest way to achieve this is by using a plugin such as Custom Login, but to remain plugin-free – and earn some serious “props” as a WordPress maestro – you can add a bit of code to your theme to control the look of the login form – everything from logo, to colors, to background images.

Paste this code into the functions.php file for your theme:

function my_login_logo() { ?>
<style type="text/css">
body.login div#login h1 a {
background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/site-login-logo.png);
padding-bottom: 30px;
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );

Notice the “background-image: url” bit in the middle of this code? That’s where you’ll enter the image url for your background image.

And if you want to change any other design element of the login page, you can add CSS code between the curly brackets above. WordPress has a complete list of all the different CSS selectors on the login page.

In one case, the end result looks like this: