Yogesh Chauhan's Blog

How to change the Login Logo in WordPress?

in WordPress on March 3, 2021

I am talking about logo on top of this login form:

WordPress login page

There are multiple ways to change the WordPress logo on the admin login page. We can change it using code to the Theme’s functions.php file.

To change (or replace) the WordPress logo we need to modify the CSS styles related to this heading:



<h1>
  <a href="https://wordpress.org/">
    Powered by WordPress
  </a>
</h1>


As you can see in the code above, WordPress has a logo link which is inside the h1 tag. WordPress then styles using CSS to set and display the WordPress logo as a background image.

WordPress has tons of functions for e.g. get_posts, apply_filters, add_filter just to name a few.

To insert the CSS style, we can use the login_enqueue_scripts hook. Using that style we replace the logo with ours.

Use this code to change the logo:


function my_login_logo() { 
  ...
  //add style here
  ...
}
add_action( 'login_enqueue_scripts', 'my_login_logo' );


#login h1 a,
.login h1 a {
  background-image : url(wp-contents/themes/your-theme/images/site-login-logo.png);
  height           : 65px;
  width            : 320px;
  background-size  : 320px 65px;
  background-repeat: no-repeat;
  padding-bottom   : 30px;
}

Since you’re adding style in a file without a .css extension, you need to specify the type of the code and then add the code inside these tags:



<style type="text/css">
...
//your style goes here
...
</style>


Just like this code screen capture:

WP login logo change function

In the code above, change the file named logo.png with your logo file name. Also, put your logo in a directory named /img in your active Theme files.

WordPress suggests that the size of the logo should not be bigger than 80px by 80px but we can change that using the style in the code above as per our needs.

We can also change the link so that we can direct users on click on the logo image.

Use this hook to change the link. Make sure to add the code below after the logo change code we saw above.


function my_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

function my_login_logo_url_title() {
    return 'Your Site Name and Info';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

Credit goes to WP Docs


Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
How to make WordPress main stylesheet (style.css)?WordPressClean Form Input With These PHP Functions Before Inserting into DatabasePHPLearn how to use Self JOIN in SQL and MySQLSQL/MySQLQuery to increment or decrement value in MySQL ignoring negative valuesSQL/MySQLCREATE TABLE Examples in PostgreSQLPostgresHow to add Date and Time picker in HTML and get the values using JavaScript?HTML