How to Change WordPress Login Page Logo & Background

Did you know you change the WordPress login screen logo and background easily. Just as you have a custom WordPress theme and a unique site design, why should you not have a custom WP login page as well.

By default, the WordPress login screen is same for ALL WordPress blogs and is typically located at /WordPressFolder/wp-admin/. This is how your boring default login screen typically looks like, and probably you visit it everyday.

Old WordPress Login

Now see how our WP login page looks like. Does it not look better!

Custom WordPress login

You notice that we have simply replaced the WordPress logo with our site logo and changed the background color from default light gray to black – and it makes a huge difference to branding.

Custom WordPress Login Page

Here is how we do this. We need to paste the following code into the theme functions.php file. (Note that it is a very powerful file and incorrect code can lead to your site going offline. Always keep a backup of the file, and you can always restore the file back to your WP theme folder vai FTP if anything goes wrong.)

function qot_login() {
echo '<style type="text/css">
.login h1 a {
background-image:url( "http://path/to/yourlogo.png" ) !important;
height: 30px !important; width: 200px !important;
background-size: 200px auto !important;
body {  background: #000; }
.login form { background: #333; }
add_action('login_head', 'qot_login');

What the code simply does is it adds a new inline CSS Stylesheet on the WP login page. The first line replaces the WP logo with your logo and fixes some dimensions (Remember to change the url to point to your logo). The rest of the CSS changes the background to black (#000), and the login form to dark gray (#333) to contrast it. Add the !important CSS code wherever you feel your custom CSS is not overriding the default code. Feel free to experiment with whatever colors look great on your site and match your branding.

Do this today –  It is excellent for blog branding. Why have default WP logo, when you should have your own logo there. Why look like every other site. If you run a multisite blog network, or require multiple users to login everyday … why not create this branded login screen and surprise them today.


  1. Kenneth K. Lane says:

    after read this post i m now able to change my wordpress login page design
    thank you for sharing

  2. Kathula Santhosh says:

    This is my visit to your blog. Am new-bie in blogging present working on blogger. Soon am going to move to word-press. Hope this will work for me also. Thanks for sharing this post.

  3. sunil says:

    cool one, new experience for beginners. but will you suggest backup of a file before editing it?

  4. catalina sava says:

    please tell me in details how can I change the word press login page logo???
    with regards
    @ catalina sava

  5. Fahim Zada says:

    Cool i am going to try this thumbs up for writer

  6. sarika says:

    pls tell me u have any plugins to change the website background in easy way..

  7. Cach choi clash of clans says:

    Soon am going to move to wordpress :D

  8. subroto says:

    at first we can read this post then we are now able to change this website background.
    thanks for sharing

  9. James says:

    After following the steps you outlined, I love the feel and look of my new blog background.

  10. the fault in our stars pdf says:

    Hi i tried this tutorial but my login box is not in center anymore ? please help

  11. sachinmrs says:

    Thanks for this wonderful information for us who using word press.I am also using word press so its a great ides to change the logo and color of theme.I will definitely try this, If i will face any issue then i will let u know for further help.

    Thanks keep sharing

  12. Jake says:

    I have seen so many change login methodes. this one worked perfecly. just great! thanks!

  13. Abdul Kader says:

    Thank you for this informative post. I am going to definitely use all these tips to change login page of wordpress.

  14. Harish Negi says:

    This is cool, I can give it to other users of my website and surprise them by new look

Leave a Reply

Your email address will not be published. Required fields are marked *