DISCLAIMER: this post is older than one year and may not be up to date with latest WordPress version.

WordPress login logo looks nice, but sometimes you may want to change it, for example when building a site for a client. In that case, you can use a plugin, or simply take advantage of this cool hack.

Nothing hard with this recipe. The only thing you have to do is to copy the following piece of code, and paste it on your functions.php file:

function my_custom_login_logo() {
    echo '<style type="text/css">
        h1 a { background-image:url('.get_bloginfo('template_directory').'/images/custom-login-logo.gif) !important; }
    </style>';
}

add_action('login_head', 'my_custom_login_logo');

This hack has been submitted by Rami. Thanks for your contribution!

Tags

37 Comments

  1. This is one of my favourite, simple WordPress hacks.

  2. It does not work properly … the image does not fit correctly despite being a proper wordpress login screen !

  3. This is very simple. Kill plugins. :)

  4. Nevermind, I just saw that the original post on the contributor’s site is from 2009 (sorry I didn’t check and I cannot read hebraic).

    My bad. Interestingly we came basically to the same code! I just don’t remember where I found the documentation to create this hack, so maybe we drew from the same sources.

    Our quick tip has also another function to add a custom url to the custom logo, if you need to.

  5. Hi there. I know there is something in the codex regarding this. I actually edited the article with the code mentioned above this past week.

    If you’d like the source, I could look.

  6. This code works fine.

    I tested it on a Twenty Eleven Child Theme 25/12/2011

  7. youll need url edited also and mouse over powered by wordpress
    -=-=-=
    function my_custom_login_logo() {
    echo ‘
    h1 a { background-image:url(‘.get_bloginfo(‘template_directory’).’/images/logo-login.png) !important; }
    ‘;
    }

    add_action(‘login_head’, ‘my_custom_login_logo’);

    function my_custom_login_url() {
    return site_url();
    }
    add_filter( ‘login_headerurl’, ‘my_custom_login_url’, 10, 4 );

    function login_header_title()
    {
    return get_bloginfo(‘name’);
    }

    add_filter(“login_headertitle”,”login_header_title”);

  8. Sorry to say ‘steve’. Your code isn’t working properly on it.

  9. Need to change URl as well because when you click on image it directs you wordpress. Can i customise so it directs to my site ???

  10. For those of you who really want to use a plugin 😉 , Woothemes has just relased a plugin called WooDojo with several functions, including this one (not avalaible on wordpress.org for the moment).

  11. The code works fine for me in WP3.3.2. I did have to change the CSS target to:
    .login h1 a

    @steve: Thanks for the enhancement – it works perfectly for me. I made one change:
    add_filter( ‘login_headerurl’, ‘my_custom_login_url’, 10, 4 );
    to
    add_filter( ‘login_headerurl’, ‘my_custom_login_url’);
    because that filter does not take any parameters (it worked even when 4 was specified).

  12. Why not just save the time and effort and simply change the image file itself?

    wp-admin/images/logo-login.png

    You would probably want to replace it with the same image dimensions. Nevertheless, this would prevent the need for additional coding. I am sure there are many ways to complete this. Just putting an alternative method out there.

  13. Cool. I didn’t know we could do that to our login page. I’m going to have to try this. Do we need any specific coding?

  14. Just use a plugin..

  15. I’d have to agree with Carl. Why not just replace the image and call it a day?

  16. why change what works?

  17. I didn’t know you could do this. I’m going to try this on my client’s sites and give them a nice surprise!

  18. I would copy it definitely… It is an easy tip and instruction all you have to do is copy code and you could use it on your site and you could use it immediately. 😀

  19. works great, thanks.
    and in reference to carl’s question – you don’t change the wp image file because when you update wordpress the standard wp logo will come right back.

  20. Great work on that. I was creating my own hack for that. LOL. Wish I have found this post before

  21. I am new to the editor things. Where should I exactly paste the above given code on functions.php ?

  22. Thanks. I have lots of blog and this is helpful for me for my blog logo. I used wordpress in all my blog because for me its user friendly.

  23. Nice info..

    Please post some information regarding custom post types & front-side posting form.

  24. you can simply change the url and mouseover text on lines 82 and 83 in wp-login.php in your base folder…

    (sorry if anyone mentioned this already. too tired to look)

    good night, friends

  25. I double checked Carl’s suggestion, the URL to the default image on WordPress login page is this:

    wp-admin/images/wordpress-logo.png

    not

    wp-admin/images/logo-login.png

    I am referring to WordPress 3.4.1 – there is no image file logo-login.png in wp-admin image folder.

  26. double checked Carl’s suggestion, the URL to the default image on WordPress login page is this:
    wp-admin/images/wordpress-logo.png
    not
    wp-admin/images/logo-login.png
    I am referring to WordPress 3.4.1 – there is no image file logo-login.png in wp-admin image folder.

  27. To those that say ‘just swap out the logo-login.php’ and ‘edit lines 82-83’ of wp-login.php I remind that with every update you have to do this over and over again.

    I am looking at a plugin so that I don’t have to do it with every update ugh.

  28. Hi, I have just started playing with wordpress and when you say copy and paste I understand this but is there a particular place in functions.php that you have to place it. I placed it at the very top and get and error message: Fatal error: Call to undefined function add_action() in /home/hursty06/public_html/wp-includes/functions.php on line 14.

    It appears to be referring to the last line line of code in the pasted code. Could someone advise what I have done wrong and what I need to do to fix it please.

  29. Its simple code. However plugins lets you do a bit more. :)

    I made a simple plugin without using much php calls rather only the required ones.

    try this one:

    http://wordpress.org/extend/plugins/my-wp-login-logo/

  30. line 77 on wp-login.php, find:
    } else {
    $login_header_url = __( ‘http://blabla.com/’ );
    $login_header_title = __( ‘Click to go back to bla HomePage’ );
    }
    The wordpress logo is 274×63 pix, Create your own wordpress-logo.png and upload to wp-admin/images to replace th default login image

  31. hi i have added this to funtions.php but it doesnot appear.
    does it require any logo link?

  32. hi i have added this to funtions.php but it doesnot appear.
    does it require any logo link?

  33. Working Code!

    add_action( ‘admin_head’, ‘portfolio_icons’ );
    //admin logo
    function my_custom_login_logo() {
    echo ‘
    #login h1 a { background-image:url(‘.get_bloginfo(‘template_directory’).’/images/admin-logo.png) !important; }
    ‘;
    }

    add_action(‘login_head’, ‘my_custom_login_logo’);
    function my_custom_login_url() {
    return site_url();
    }
    add_filter( ‘login_headerurl’, ‘my_custom_login_url’, 10, 4 );

    function login_header_title()
    {
    return get_bloginfo(‘name’);
    }

    add_filter(“login_headertitle”,”login_header_title”);

  34. One of the most simple hacks I have ever seen. Thank you for sharing.

  35. Simple indeed, but what about thesis and Genesis themes. Will this work for those frameworks as well?

  36. I have used this set of code, but its not working. I am not sure what’s wrong.

Leave a Comment

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