Blog

  • Home
  • Change The Logo On WordPress Login Page

Blog

Wordpress Login Logo

Change The Logo On WordPress Login Page

Brandon Mack February 14, 2016 3 Comments

Simple little how to. Let’s change the WordPress logo on the wp-login.php to… yours. Or in this case… ours.

Custom Logo WordPress Login

First, locate the functions.php file in your current theme. We’ll need that. If your theme is a child of a parent theme, there is a chance it may not have its own functions.php file. No worries, just create one. The functions.php file in a child theme doesn’t overwrite the functions.php file in a parent theme like the rest of the files would. The functions.php in a child theme is essentially appended to the parent’s file.

Second, put together a logo to use in place of the WordPress logo on the login page. The existing logo is 84px by 84px but yours won’t have to be. If you want it to be some other size, we’ll just have to adjust the CSS. We’ll use the one below.

Envisage Consulting

Copy and paste the code below into the functions.php file of your theme. If your functions.php file already has some code in it, find the very last ?> symbol and paste this AFTER it. Replace the capitalized italicized portions for background-image, width, and height to match the location, width, and height of your image.

<?php function my_login_logo() { ?>
<style type="text/css">
.login h1 a {
background-image: url( LOCATION_OF_YOUR_LOGO_IMAGE );
width: WIDTH_OF_YOUR_LOGO_IMAGE_IN_PX;
height: HEIGHT_OF_YOUR_LOGO_IMAGE_IN_PX;
background-size: contain;
}
</style>
<?php }

add_action( 'login_enqueue_scripts', 'my_login_logo' );

function my_login_logo_url() {
return 'http://envisage-consulting.com';
}

add_filter( 'login_headerurl', 'my_login_logo_url' );

function my_login_logo_url_title() {
return 'Envisage Consulting';
}

add_filter( 'login_headertitle', 'my_login_logo_url_title' );
?>

It should be noted that this is theme specific. If you change themes, this will have to be done all over again for that theme. This also means that if WordPress updates its core files, it won’t change the logo you setup.

That’s all there is to it. Once you upload the logo image to the location you specified in the code, add the above code to the functions.php files of your theme and upload it, you are good to go. You can now put your logo on your own site, your logo on client’s sites, or the client’s logo on their own site. However you want to do it, it’s a pretty easy process.

Custom Logo WordPress Login

UPDATE: In WordPress 4.5 (Coleman), you will have to change one line of code. Since they added the option to change the logo in the Customize section of the Administration Panel, the code above doesn’t override the default logo. You will need to change the following:

add_action( 'login_enqueue_scripts', 'my_login_logo' );

to

add_action( 'login_head', 'my_login_logo' );

Enjoy!

3 Comments

    February 4, 2018 Reply

    Parse error: syntax error, unexpected ‘<', expecting end of file in /home/hardline/webapps/victory_wordpress/wp-content/themes/victory/functions.php on line 18

    how to clear that problem

      February 5, 2018 Reply

      It’s hard to say without seeing the code. Anyway I could take a look at the code in the functions file? Feel free to send me a message using our contact form.

    April 24, 2016 Reply

    Thanks for the update regarding WordPress 4.5! I had been using login_enqueue_scripts to customize the CSS of my login page, but it broke after upgrading to 4.5. I figured it had something to do with the new custom logo option, but none of the official WordPress docs offer a fix. I knew there had to be a simple solution.

Leave Comment