You can login to any WordPress website by adding /wp-admin/ or /wp-login.php suffix to the website URL. WordPress login page is one of the important page anyone needs to open first in order to login to a website. By default it will show a WordPress logo on the login page. In this article, we will explain how to change the default WordPress logo in login page.
Why to Change WordPress Logo?
Earlier days, you could find a black WordPress logo indicating WordPress.org website. However, this was changed in later WordPress versions to use blue WordPress logo that is used by WordPress.com websites. Now, these two colors are used interchangeably without differences. It makes sense to remove the logo to avoid confusing the users logging into your website.
The logo is also hyperlinked to WordPress.org website. This means you are offering a dofollow link from your site to WordPress.org site without your knowledge. In addition, if you allow subscription, sell products or use forums, all users will see the WordPress logo when login to your site. This is not a professional solution especially if you are setting up site for your client.
In summary, you should remove this WordPress logo on the login page if you want your site to look professional and white labelled. This is the same problem like removing the footer powered by WordPress link that comes with all twenty-default themes.
How to Change WordPress Logo in Login Page?
There are many methods to change the login logo of your WordPress site. Let us explain all options in detail. If you want a quick solution, go to the plugins option to use a plugin for changing the logo.
Find Logo Location
In order to remove or replace the default logo, first you have to find the location of the image URL. Open your login page and right click on the default logo. Select inspect element to open developer console section on the browser.
If you are using Windows PC, press F12 to open developer console. This will work on all browsers like Chrome, Firefox and Edge.
On the left hand side under “Elements” section, you can find the logo is linked to WordPress.org site with the anchor as “Powered by WordPress”. On the right side panel under “Styles” section, you can find the image logo is embedded in CSS with the h1 title .login h1 a. Hover over the links to find the location of the CSS and image files:
- /wp-admin/css/login.min.css
- /wp-admin/images/w-logo-blue.png?ver=20131202
- /wp-admin/images/wordpress-logo.svg?ver=20131107
Now, you know the CSS class, CSS file location and the image details. As you can see there are both blue and black images available and the first blue one is used by default in login page.
1. Disabling Login Logo
It is an easy task, if you simply want to remove the logo and link. You can do this by adding “display: none” to the image CSS class like below.
.login h1 {
display: none;
}Now the default logo image will disappear and there will be no hyperlink to WordPress.org.
If you find the login form is aligned on top, you can adjust the margin by using the below CSS.
.login form {
margin-top: 50px;
}The default margin-top value is 20px which you can change as per your need to move the form up or down. You can use any other decorations like changing the background, padding, width and height of the login form.
Adding CSS to WordPress
In oder to add the above CSS, login to your WordPress admin panel. Navigate to “Appearance > Customize > Additional CSS” section. Paste the CSS and publish your site to remove the logo on the login page.
2. Adding Custom Logo in Login Page
Just removing the logo may not be sufficient when you offer professional subscription or forum site. In this case, you can replace the default image or URL with your custom image. This will help you to increase the brand value as each user login to your site will see your logo (for this you do not need to use the above option 1).
- First prepare your logo with appropriate width and height. You have to prepare the images in PNG and SVG format. Generally, you should use the same logo you use on the site header to keep it uniform.
- Keep the name of your logo as w-logo-blue.png and wordpress-logo.svg which are the names WordPress uses for the login logos.
- Login to FTP client like FileZilla and navigate to /wp-admin/images/ section.
- You will find many WordPress logo images and locate the w-logo-blue.png and wordpress-logo.svg files.
- Now, upload your logos to replace the default logos.
Open the login page of your site in the browser and you should see your site logo instead of WordPress logo.
3. Replacing WordPress Logo Through CSS
The above method has a problem that the logo will be still linked to WordPress.org website. In addition, you need a SVG file as WordPress uses PNG/SVG logos directly in the CSS. Hence, it is a good practice to change the CSS instead of the above method. In this way, you can have one PNG logo and replace both PNG and SVG URLs in CSS.
- Go to your WordPress admin panel and upload your logo image under “Media > Library > Add New” section. Get the complete URL of the image file. Alternatively, you can also directly use any image URL from your own subdomains or third-party websites as you only need the URL to replace in CSS.
- Login to FileZilla or any FTP client and go to /wp-admin/css/ directory.
- Open the login.css file in a text editor.
- Locate the .login h1 a class that you find on your login page using developer console.
- It should have the style definition like below:
- Replace the background-image URLs with your logo URL. It should look like below:
- If you do not have SVG image, replace it with same PNG URL as we have show above or comment that line to only use PNG file.
- Save and re-upload the modified file.
- Now open the login.min.css file and replace the image URLs.
This will replace the logo image with your custom image on the login page.
Replacing Hyperlink and Link Text
The WordPress.org hyperlink and “Powered by WordPress” link text are directly used in login.php file. Follow the below instructions to replace them:
- Login to FTP and open login.php file under the root directory of your site (note, login.php file is outside of /wp-admin/ folder).
- Find the link and Powered by WordPress link text with your site URL and site tag line respectively.
- Save the file and upload back on the server.
Now, everything is done that you will see a custom logo linked to your site.
4. Using Commercial Themes
There are many professional themes available in market that allows you to use custom logo instead of WordPress logo on login page. For example, we were previously using Highend theme that allows you to upload custom logo through theme options.
This is a super easy way to replace the default logo. If your theme does not offer this feature, check with your developer whether they can help you to change the image and URL.
5. Using Plugin to Replace WordPress Logo
WordPress has plugin for everything. Follow the below instructions if you want to use plugin to replace login logo and URL.
- Login to your admin panel and navigate to “Plugins > Add New” section.
- Search for “login logo” and install “Login Logo” plugin.
- Create a PNG logo with a width of 312px and name it as login-logo.png.
That’s it. The plugin will automatically replace the logo image on the login page. However, it has the same problem of not replacing the hyperlink to WordPress.org site.
The other option is to install GS Custom Login that gives you options to replace logo as well as linked URL. After installing and activating the plugin, go to “GS Plugins > GS Login Customize” menu. This will take you to the default WordPress customizer section.
- By default the plugin will link the logo to your home page, however, you can also enter any custom URL to link to the logo.
- Upload your custom logo image and customize the height and width.
- There are also options for adding beautiful background image to login page, adjust form width and change button colors.
- Select your options and publish the changes.
This works for anyone who do not want to touch the backend files. This is also a recommended way as the changes will not disappear when you update theme or WordPress. In addition, GS Custom Login also has a premium version that will cost you $30 per year. It includes additional options like adding reCATCHA, disabling form footer links and insert social icons.
6. The WordPress Codex Way
WordPress codex has a page to explain customizing the logo in somewhat similar way like we have explained above with the CSS modification.
- Create a images directory under your theme directory.
- Upload your logo under /themes/my-theme/images/ directory.
- Login to FTP and add the below code under functions.php. Replace the yourlogo.png with the correct file name.
function login_logo() { ?>
<style type="text/css">
#login h1 a, .login h1 a {
background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/yourlogo.png);
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'login_logo' );You can add width, height, margin and other parameters directly in the above code. Next, to change the link and text, add the below code in functions.php file.
function login_logo_url() {
return home_url();
}
add_filter( 'login_headerurl', 'login_logo_url' );
function login_logo_url_title() {
return 'Custom Link Text';
}
add_filter( 'login_headertitle', 'login_logo_url_title' );We did not test this as it depends on your theme. When changing or updating your theme, all changes in functions.php file will disappear or you can use child theme to retain the changes. However, changing CSS/PHP file as we have explained above will not have problem with the theme update. You have to take care only when you are updating WordPress core.
Leave a Reply
Your email is safe with us.