New Login page Learn2create
New Login page Learn2create

We at Learn2Create recently thought of changing the logo on our admin page from the default WordPress Logo to our own. And, WE DIDN’T WANT TO USE A PLUGIN TO DO THAT!

Requirements:

  • Access to the CPanel
  • Basic knowledge about css and using broswer tools

Just like everyone I googled up “Change WordPress Logo on Admin login page” and tons of articles loaded up but, none of them were helpful. One article suggest that I insert a piece of code to override the settings or to use a plugin.

The official documentation by WordPress wasn’t clear about which file I had to edit.

Here’s how I did it, without overriding the settings or installing a plugin.

In pointers:

1. Open the wp-login.php file present in the root (public_html) of your WordPress installation.
File Path : root > wp-login.php

2. Open the external CSS file ‘login.min.css’  present in the css folder inside wp-admin folder.
File Path : root > wp-admin > css > login.min.css

3. Using Page Search feature on the browser CRTL+F search for '.png' in the CSS file. By default there will be two images - a .png and a .svg file. Remove the URL from the background style and replace it with the URL to your logo.

.login h1 a{
background-image:url(//yoursite.com/wp-content/uploads/2016/04/new_logo2.png);
background-image:none,url(//yoursite.com/wp-content/uploads/2016/04/new_logo2.png);
-webkit-background-size:200px;
background-size:200px;
background-position:center top;
background-repeat:no-repeat;
color:#444;
height:100px;
font-size:20px;
line-height:1.3em;
margin:0 auto 25px;
padding:0;
width:100%;
text-indent:-9999px;
outline:0;
display:block
}

 

4. Congratulations, you have successfully changed the image that loads up in your wordpress admin login page.

But, notice that the image still links to ‘wordpress.org’ and the alt text says ‘Powered by WordPress’. To change that, head back to the wp-login.php file and using Page Search feature (CRTL+F) search for ‘Powered by WordPress’; you’ll find two lines – the link and the alt text, change them both and you are good to go!

do_action( 'login_head' );

if ( is_multisite() ) {
 $login_header_url = network_home_url();
 $login_header_title = get_network()->site_name;
 } else {
 $login_header_url = __( 'https://yoursite.com/' );
 $login_header_title = __( 'YourSiteName' );
 }

 

NOTE :

  • If you do not have a ‘login.min.css’ file then edit the ‘login.css‘ file.
  • If the new logo that you added doesn’t fit then, set the width to 100% and change the background-size till it fits properly.

Hope this helps! 🙂

Check Out Other Beginner’s Articles on Learn2Create:

Run a program on Raspberry Pi using after closing SSH Connection
Programming an Arduino using a Raspberry Pi
A beginner’s guide to Programming
A beginner’s guide to Android Development
A beginner’s guide to Robotics

Let us know of any updates or edits on this matter in the comment section below. Learn to create with Learn2Create!

LEAVE A REPLY

Please enter your comment!
Please enter your name here