Customize WordPress Login Page Logo

Custom WordPress login screenDo you let people log into your WordPress site? Would you rather your login page just display your own company or brand logo rather than the WordPress logo?

Changing the logo on your WordPress login screen is easy. Here’s how you do it:

1.) Upload your logo image to your site.

WordPress Image Edit Screen
When you edit a WordPress image it will give you the address the file is located at.

If you already have it uploaded right-click on it to get the image properties and copy the URL. If not upload it in “Media” by selecting add-new and then following the prompts to upload your image. You can then get the URL from the WordPress Dashboard by clicking on the title of the image you uploaded and copying it from the form (see screenshot).

2.) Open your theme’s functions.php file.

This is usually found in /wp-content/themes/[your-theme-name]

3.) Create a function for the new image

Add the following to your functions.php to set up the new logo. Note you may have to tweak the width and height for your own image.

function theme_login_head() {
  ?>
  <style type="text/css">
  body.login #login h1 a {
    background: url("http://yoursite.com[path-to-your-logo]logo.png") no-repeat scroll center top transparent;
    height: 80px;
    margin-left: 8px;
    width: 320px;
  }
  </style>
  <?php
}

4.) Register the function with WordPress

After you add (and customize) the function with your new logo we need to tell WordPress to use it. You can do that by adding the following line of code:

add_action( 'login_head', 'theme_login_head' );

5.) Save the functions.php file

If you’ve downloaded functions.php to edit it make sure it gets back to your server.

6.) Test

You should now have your own logo displaying on your login page. Wasn’t that easy?

6 Replies to “Customize WordPress Login Page Logo”

  1. Easy enough, but the image link still goes to wordpress.com. Is there a similar way to update the link so it goes to the homepage?

  2. Ha! In all this time I can’t say I had ever actually clicked on it. Sure, just use the following in your functions.php:

    function theme_login_url( $url ) {
    return get_bloginfo( ‘url’ );
    }
    add_filter( ‘login_headerurl’, ‘theme_login_url’ );

  3. Hi,
    at my site it doesn´t work. I don´t know why. Perhaps I´ve set the add function wrong. Where I have to set this function (add_action( ‘login_head’, ‘theme_login_head’ );)?
    Thanks a lot!

  4. The code has no errors but does not work it produces
    Parse error: syntax error, unexpected $end in C:Apachehtdocstestwp-includesfunctions.php on line 4703

    function theme_login_head() {
    ?>
    body.login #login h1 a {
    background: url(“http://localhost/test/spradling.png”) no-repeat scroll center top transparent;
    height: 80px;
    margin-left: 8px;
    width: 320px;
    }

    <?php
    }