By default, WordPress shows it’s logo in the login page of your website. This is not a problem for most of the users who run their personal blogs or websites. If you have a WordPress website that allows multiple users to sign in, it is good to change the default WordPress logo in the login page for branding purpose.
In this post, I’ll show you how to replace the login logo with a custom one.
Warning: This method includes making modifications to the theme files. Take a backup of your website or make a copy of your theme’s functions.php file before continuing so you can restore it if something goes wrong.
Method 1 – Using Built-in theme editor
Step 1:
Login to your WordPress site as admin and go to Media -> Add New to upload a new image and copy the image url.
You can also upload your new logo to the theme’s images directory or you can create a new directory to upload the logo. This can be done with the help of web hosting control panel or FTP.
Step 2:
Go to the Admin Dashboard -> Appearance -> Theme Editor.
Step 3:
When the editor opens, find and select functions.php from the right side of the page and add the following code to the end of the page.
function my_custom_logo() { ?>
<style type="text/css">
#login h1 a, .login h1 a {
background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png);
height:100px;
width:100px;
background-size: 100px 100px;
background-repeat: no-repeat;
margin-bottom: 10px;
}
</style>
<?php } add_action( 'login_enqueue_scripts', 'my_custom_logo' );Replace logo.png with the name of the file you have uploaded. If you have uploaded the new logo with WordPress, modify the background-image property as shown below.
background-image: url(url copied in step 1);
Method 2 – Editing theme files manually
Step 1:
Upload your new logo to the theme’s images directory or you can create a new directory to upload the logo. This can be done with the help of web hosting control panel or FTP.
Step 2:
Go to the theme’s directory and add the following code to the theme’s functions.php file.
function my_custom_logo() { ?>
<style type="text/css">
#login h1 a, .login h1 a {
background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png);
height:100px;
width:100px;
background-size: 100px 100px;
background-repeat: no-repeat;
margin-bottom: 10px;
}
</style>
<?php } add_action( 'login_enqueue_scripts', 'my_custom_logo' ); If you are using an FTP client, download the file to your machine and upload it after editing.
Why you should not use WordPress plugins
Although there are several plugins available that can help you to change the logo without coding, It is good to avoid using them because using too many plugins can slow down your WordPress site.
