Add Your Own Logo To The WordPress Login Page

If you are using WordPress (self-hosted) for your blog then you have the option to almost do anything with customising. Each and every time I try my best to tweak the default options and make it better with my own. We tweaked our permalinks and used a custom structure for categories and tags. So instead of ‘category’ in the URL we’ll have ‘topics’. I feel simple things like these matters a lot when it comes to Branding. How do you create a blog logo for WordPress and make it an organic part of your website? Read the article on Logaster to find out!

Adding Own Logo To The WordPress Login Page

Talking about Branding, we can’t avoid logos. Your blog’s logo defines your blog’s brand. In this article I’ll share some simple tips to use your blog’s logo on the WordPress login page. It’ll be appearing on pages like /wp-login.php, /wp-admin.php, /wp-register.php, etc.

You can do this either via a WordPress plugin or via custom code. I’ll share the steps for both for adding your own logo to the WordPress login page.

1. Using A WordPress Plugin

For HellBound Bloggers (HBB) we are using the WordPress plugin “Login Logo“. This is a very simple plugin with no settings to change.

Just install and activate this plugin. Then go to your WordPress content directory (wp-content) and upload your own logo (rename it as login-logo.png). That’s it! Make sure you use a transparent background on the PNG image + crop it tightly with no padding pixels. For best results use a width of exactly 312 pixels. This plugin also works in the mu-plugins directory.

2. Using Custom Code

If you are not a big fan of plugins, then custom code is always there to help you. Just use this code on your theme’s functions.php file and do the image upload thing as mentioned in the #1 option.

function custom_loginlogo() {
echo ‘<style type=”text/css”>
h1 a {background-image: url(‘.get_bloginfo(‘template_directory’).’/images/login_logo.png) !important; }
</style>’;
}
add_action(‘login_head’, ‘custom_loginlogo’);

Be careful when you make changes to the core files, do take a backup before applying this.

Though very simple to do, I’m sure most of us wouldn’t even have cared to try this. But, if you have an awesome logo won’t you love to show it off? 😉 Do try this simple branding tip and let us know if you face any issues in the comments below.