How To Change Login Logo In WordPress?

WordPress, being as CMS, creates you with the login page by default to login to your site in order to manage out your site. However, it will by default, add its own logo in the login form when you view the login page for your site, ie, http://yoursite.com/wp-login.php. So, what about if you want to change it as you like/need for your site? Is it really doable? Well, it is doable and here we will describe about how to change login logo in WordPress.

How to view WordPress login page for your site?

Well, you already may know about how to view the login page for your site built within WordPress, right? If not then, you can view it via: http://yoursite.com/wp-login.php. However, it can be changed to any other for better security of your site using the plugin for same available via the WordPress plugin directory.

Also, by default, the WordPress login page will look like the below screenshot as you may know already.

From there, you can see that the logo is of WordPress itself. So, what about changing it? Well we will move further and will be changing it according to your site requirement.

When do you need to change the WordPress default login logo image?

Well, in some of the cases, you may create a site for your client, right? And on that site, they may also want to add their own branding to their login form too, right? Well, on this case, you will need to change WordPress default logo logo image to reflect their site branding.

Also, in some case, if they does not say the same too but, they are creating some of the social sites or eCommerce site then, most probably, you need to change the logo to match their branding, since seeing the same WordPress logo may annoy them to use up your service.

Now, after knowing why to change the WordPress login logo image, now, let’s move ahead to learn about how to change login logo in WordPress.

How to change login logo in WordPress?

Well, if you have followed up our previous articles then, you may already know about which file in the theme should you maintain the changes. Well if you have not then, the file to be changed is the functions.php file of the theme. But, if you do not want any customization done on theme update then, you can use the functions.php file of the child theme.

Now, since you know about which file to edit to make the change, hence, let’s move ahead to change login logo in WordPress.

Since, WordPress uses the CSS background image properly to display the login logo in login page, by default HTML tag: <h1><a href="http://wordpress.org/" title="Powered by WordPress">Your Site Name</a></h1> hence, we will be using the function hook: login_enqueue_scripts to enqueue our own custom CSS code to render/change the default WordPress login logo. Hence, let’s move ahead and paste the below PHP code in the functions.php of the theme file:

function theme_slug_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/image/favicon.png);
            height:75px;
            width:320px;
            background-repeat: no-repeat;
            padding-bottom: 20px;
        }
    </style>
<?php }

add_action( 'login_enqueue_scripts', 'theme_slug_login_logo' );

Now, after you have used the above code in the mentioned file, you will see that the logo image is now changed to your own image. Also, you need to change this vale: <?php echo get_stylesheet_directory_uri(); ?>/image/favicon.png to the exact link to the image to be used as logo image for your site.

Output of the change login logo in WordPress

Now, if you have added the mentioned code above in the required file, ie, functions.php, then, you will probably see the output of that as the screenshot below:

As you can see in the above image/screenshot, you see that the WordPress default login login is changed to your custom logo by just applying above provided action hook, with the proper CSS code applied.

You may also want to read:

1. Tutorial On Creating WordPress Child Theme
2. Recover Forgotten Password From Local WordPress Install
3. Apply Custom CSS Code In Your Site Via Inspect Element
4. Change Default Language In WordPress
5. Removing Default Uncategorized Category

Conclusion

If you have followed up the tutorial properly and now can change login logo in WordPress with ease then, we can say that you are now more familiar on this than before. However, if you are still confused on the same and want to know more about it then, do drop the comment below in the comment box and we will follow it up.