Change WordPress login logo Tutorial

📂 Category: PHP

🖺 Last modified: 22nd Oct 2020

💻 Experience: Beginner - Intermediate

🕑 Read Time: 6 min

We’re all familiar with the look of the WordPress login page with the WP logo above the login form. Developers rarely customize the admin log in page logo, specially when they’re the only who access the WP Dashboard. When developers are not the only who use the login page, it would be a good practice to customize the admin logo and make the login page look more professional. In this tutorial we’ll show you how to change WordPress login logo into a custom one.

Reasons to change WordPress login logo

The logo is the main and most important visual element of virtually any website. It represents the company identity, the brand or anything that creates the visual relation with the visitor. In most cases, the logo is the first thing the visitor notices on the website. Since regular website visitors don’t have access to the admin area, many WordPress developers don’t spend time to change WordPress login logo. In situations where the developers are also the only website administrators, replacing the admin login logo doesn’t even matter that much.

To change WordPress login logo doesn’t take much time and it’s not complicated to do. Therefore, in cases when your client will be the website administrator or content editor, to change WordPress admin logo would be a good practice. Your clients will be much more pleased when they see their own logo and customized login page then the default WP login appearance. Don’t hesitate and spend a couple more minutes of development time to enhance your client’s user experience when administrating the website.

Change WordPress login logo quickly and easily.

The WordPress admin login page with a custom logo.

Furthermore, you can even adjust the WordPress login page colors according to the logo and even customize the WP Dashboard completely. For now, let’s just change WordPress login logo into a custom one. You can do it quickly using a plugin or if you prefer, with a couple of lines of code.

 

Change WordPress login logo using a plugin

As we mentioned earlier, change WordPress login logo is a simple and quick fix. There are a couple of WP plugins available that will allow you to change the admin login logo in less than a minute. In the WP Plugins Repository you will also find more advanced plugins that offer the possibility to fully customize the login page. For now, let’s just quickly customize the login page logo.

Login Logo by Covered Web Services is one of the simplest custom admin logo plugins. To change WordPress login logo, all you have to do is upload a custom logo into your theme’s wp-content folder. Use a FTP client, cPanel File Manager or a WordPress File Manager to upload your logo and rename it into login-logo.png . The plugin will do the rest of the work by itself, even resize the logo to fit the space above the login form. No additional settings required.

Download the Plugin

Change WP login logo by Boopathi Rajan is another super simple plugin that will help you to change WordPress admin logo in a couple of clicks. All you have to do to change WordPress login logo is open the plugin settings page and upload a custom logo or pick it from your Media Library. Additionally, the plugin offers the possibility to manually define the logo width and height. All done in less than a minute.

Download the Plugin

My WP Login Logo by Afsal Rahim will also allow you to change WordPress login logo quickly and easily, but also offer a couple of additional customization options. Similarly to the previous plugin, you can upload a custom admin logo or pick it form the Media Library and define it’s dimensions. Furthermore, the plugin allow you to set a link and title tag for the logo, add a custom message to the login form and even turn on a nice fade in effect.

Download the Plugin

Change WordPress admin logo manually

Many developers tend to use as less plugins as possible, to keep their WordPress website as lightweight as possible. Another reason some developers don’t like to use too many plugins is to keep their Dashboard clean without too many tabs and buttons. With less plugins, there’s also less maintenance to do. If you’re one of those, you can still change WordPress admin logo quickly and simply without using a plugin.

The simplest method to Change WordPress admin logo manually requires no coding at all. It consists of replacing the original WP admin logo with your own custom logo. The original login logo is located inside your WordPress installation /wp-admin/images/ folder and it’s called wordpress-logo.svg. So basically, all you have to do it to use a FTP client, cPanel File manager or a WP File manager plugin to replace the original logo file with your own. Just make sure you have the logo in SVG format and rename it according to the original file.

The downside of this method is that you’ll probably have to change WordPress login logo again when you upgrade WP to a newer version. Also, the login logo link will still lead to the WordPress website. This method is a quick and simple solution to customize the login logo if you don’t mind the small downsides.

 

Custom WordPress admin logo PHP code

The WordPress admin logo is actually a H1 title with hidden text, linked to the WP official website. It’s styled with a couple of lines of CSS that hide the text, define the dimensions and sets the actual logo as background image. To change WordPress login logo we need to add a short PHP code snippet to our theme’s fuctions.php file. The PHP code will override the original CSS code, the link url and the title text.

Pro Tip: When editing WordPress template files such as fuctions.php, the best practice would be to create a Child theme. That way your changes won’t be lost once you update the main theme. To learn more about Child themes, consult the WP Theme Handbook.

The PHP code snippet that will allow you to change WordPress login logo consists of a couple of functions. The first function will use the login_enqueue_scripts hook to override the original CSS and replace the WP login logo with a custom one previously uploaded into your Media Library. Another function will override the admin logo link leading to the WP website with a link leading to your website homepage. Finally, the last function will replace the hidden text saying Powered by WordPress with your own custom text.

Here’s the PHP code to change WordPress admin logo with your own. Paste it at the end of your fuctions.php file and customize according to your needs.

>function custom_login_logo() { ?>
<style type="text/css">
#login h1 a, .login h1 a { 
background-image: url(http://yourwebsite.com/wp-content/uploads/2020/05/your-logo.png);
}
</style>
<?php }

add_action( 'login_enqueue_scripts', 'custom_login_logo' );

function custom_login_logo_link() { return home_url(); }

add_filter( 'login_headerurl', 'custom_login_logo_link' );

function custom_login_logo_text() { return 'Welcome to Our Website Dashboard'; }

add_filter( 'login_headertitle', 'custom_login_logo_text' );

Save the changes and log out from your WP Dashboard. If you’ve done everything correctly, the admin screen should appear with your logo above the login form.

 

Adjusting the dimensions of the customized login logo

The default width of the WordPress admin logo is 84px. Accordingly, when you change WordPress admin logo using the PHP code from the previous example, your custom logo width will be 84px. The logo height will adjust automatically.

To customize the login logo dimensions all we have to do is add a couple more CSS properties to the custom_login_logo() function from the example above. After adding the additional CSS properties, our custom_login_logo() function will look like in the following example. You can replace the custom_login_logo() function from the previous example with the following one to change WordPress login logo and customize it’s dimensions.

function custom_login_logo() { ?>
<style type="text/css">
#login h1 a, .login h1 a { 
background-image: url(http://yourwebsite.com/wp-content/uploads/2020/05/your-logo.png);
width:300px;
height:300px;
background-size: 300px 300px;
background-repeat: no-repeat;
margin-bottom: 50px;
}
</style>
<?php }

add_action( 'login_enqueue_scripts', 'custom_login_logo' );

 

To learn more on how to change WordPress admin logo and customize the login page, consult the WP Codex.