Skip to content

WordPress: brand your Login with your custom logo

Branding is important, right? Use this simple WordPress Function to replace the default WordPress login logo with your client one!

First of all, you have to put your custom logo into your current theme directory, on my example i put my “logo.png” inside a folder called “images” on my theme folder.

Second, add this function to your WordPress theme function. Replace the background sizes and height to adjust to your custom logo sizes. et voila! My custom logo on this example is 100px width and 100px wide.

function askwebba_custom_login_logo() {

echo '<style type="text/css">

.login h1 a {background-size: 100px 100px;
height: 100px;
width: auto; background-image: url('.get_bloginfo('template_directory').'/images/logo.png)!important; 
}

</style>';

}

add_action('login_head', 'askwebba_custom_login_logo');

If you want to use the same size of the WordPress logo, no problem, that are 84px width and 84px height. On this case, you can take out the background-sizes because it will use the same code that WordPress provide, like on this example:

function askwebba_custom_login_logo() {

echo '<style type="text/css">

.login h1 a {background-image: url('.get_bloginfo('template_directory').'/images/logo.png)!important; 
}

</style>';

}

add_action('login_head', 'askwebba_custom_login_logo');