Top Nav

How To Customize your WordPress Login Page and Logo

By default when you log in to your custom hosted WordPress powered website,  you’ll see the official WordPress logo is set by default. This is fine when you’re just getting started, but if you have a site with multiple users it’s, nice to add in your own branding.

I’ve shown you a method for doing this previously, but it had the inconvenience of resetting every time WordPress updates — which is frequently. Here’s how to modify your WordPress login page to permanently use your custom logo.

Browse to your wordpresss “/wp-content/themes/currenttheme” folder. The default theme is twentyeleven however if you’re using a custom theme, go there. Download and edit the functions.php file.

wordpress functions.php edit

Tip: Before proceeding further it is a best practice to make a backup copy of your functions.php in case something goes awry.

Your theme’s function.php file should start with a <?php tag and end with a ?>.
The following code needs to be pasted into functions.php between those two tags. But, be careful not to paste it into existing code as you might break something.

1 2 3 4 5 6 7 8 
/* WordPress Login Logo Code */ function login_logo() { echo '<style type="text/css"> h1 a { background-image: url('.get_bloginfo('template_directory').'/images/login-logo.png) !important; } </style>'; } add_action('login_head', 'login_logo'); /*----End Login Logo Code-----*/

functions.php custom login logo code

Save and reupload the functions.php file to your WordPress/wp-content/theme folder.

reupload functions.php

Now create your logo. Note that the default WordPress login logo is 274w x 63h. You can make a larger or smaller logo, but I can’t guarantee it will display properly without additional tweaking of the code.

custom wordpress logodefault wordpress logo

Name your logo image file:

1 
login-logo.png

and upload it to your “wordpress/wp-content/themes/currenttheme/images” directory.

Note: that if you wish to change the image filetype to a .gif or .jpg you will need to reflect that by changing the filename in your functions.php file as well.

wordpress themes images folder

Once uploaded, your WordPress login page will display your own custom logo.  Enjoy!

custom login logo for wordpress

More Reading:

,

One Response to How To Customize your WordPress Login Page and Logo

  1. lyndall April 4, 2012 at 11:21 pm #

    Please add me to your mailing list.

    Thanks
    Lyndall

Leave a Reply