Snippet

Change the WordPress Login Logo

The WordPress login page shows the WordPress logo, and clicking it takes people to WordPress.org. On a client website or a membership website, you would rather show your own brand there. You don’t need a plugin for this small change. Upload your logo to your theme folder and use the following code to show it on the login page and link it to your homepage. For your website header, see our guide on how to add a logo to your WordPress website header.

Where to place? functions.php of your child theme, or a code snippets plugin.

Usage

  • To show your own brand on the login page of client websites.
  • On membership and online course websites, where users log in often.
  • To stop the logo from sending your users away to WordPress.org.

Code


// Show your own logo on the login page
function wpt_login_logo() {
  $logo = get_stylesheet_directory_uri() . '/images/login-logo.png';
  $css  = '.login h1 a { background-image: url(' . esc_url( $logo ) . '); background-size: contain; width: 220px; height: 80px; }';
  wp_add_inline_style( 'login', $css );
}
add_action( 'login_enqueue_scripts', 'wpt_login_logo' );

// Link the logo to your homepage instead of WordPress.org
function wpt_login_logo_url() {
  return home_url( '/' );
}
add_filter( 'login_headerurl', 'wpt_login_logo_url' );

// Use your site name as the text of the logo link
function wpt_login_logo_text() {
  return get_bloginfo( 'name' );
}
add_filter( 'login_headertext', 'wpt_login_logo_text' );

Save your logo as login-logo.png inside an images folder in your theme, or change the path in the code. Adjust the width and height to match your logo.

Explanation

  1. A comment for the first part.
  2. Declaring the wpt_login_logo function.
  3. Building the address of your logo file. get_stylesheet_directory_uri() points to your active theme, or to your child theme if you use one.
  4. Writing the CSS for the logo link: your logo as the background image, scaled to fit, in a box 220 pixels wide and 80 pixels high. esc_url() makes the address safe to print.
  5. Adding that CSS right after WordPress’s own login stylesheet with wp_add_inline_style(), so it replaces the default WordPress logo.
  6. Closing the function.
  7. Running it on login_enqueue_scripts, which fires only on the login page.
  8. A comment for the second part.
  9. Declaring the wpt_login_logo_url function.
  10. Returning the address of your homepage.
  11. Closing the function.
  12. Adding it to the login_headerurl filter, which sets where the logo links to.
  13. A comment for the third part.
  14. Declaring the wpt_login_logo_text function.
  15. Returning your site name from get_bloginfo().
  16. Closing the function.
  17. Adding it to the login_headertext filter, which sets the text inside the logo link. Screen readers read this text out.

Keep reading