The WordPress login page by default displays their own logo on the admin signup or login page. Today in this WordPress tutorial we will show you how to easily add your companies logo to this page to add a nice little branding touch to your site. It will only take you a few minutes with the code snippet that we provide below. Now let’s get started!
This is how the WordPress login page normally looks:
Now we are going to show you how to set it up so it will show your own custom logo!
Create the proper files
- In your current theme’s folder, create a new folder called “login”
- In the /login folder, create a new file and name it custom-login-styles.css
- Next, we’ll need to tell WordPress to load this css file, so open up your current theme’s function.php file and add the following code:
/* My Custom Login Logo */
function my_custom_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/login/custom-login-styles.css" />';
}
add_action('login_head', 'my_custom_login');
Now let’s get started.
Replacing the WordPress Login logo with a custom logo
Now we need to add some .css to the custom-login-styles.css file that we just created. We have attached the .css below so just add the following to that file:
.login h1 a {
background-image: url('newlogo.png');
background-size: inherit!important;
background-position: center bottom!important;
width: auto!important;
margin-bottom: 0px!important;
}
Save the logo you want to use in your /login folder where your custom-login-styles.css file is also stored.
Don’t forget to replace the file name in line 2 with the name of your own logo file.
Now that you have saved the file simply log out and go to the /wp-admin/ url and you will see your own custom logo!
We really hope that this blog helped you and as always if you have any questions please leave them in the comment below and we are more than willing to help you out!
