Post Pic

Customize WordPress login logo without a plugin

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!

48 Responses

Heather
Dec 21 2009 13:27

I’m going to do this on all of my client sites – it’s one of those little extras that’s well worth it!

Nicholas Cardot
Dec 21 2009 22:08

That’s a very cool idea. Will that get replaced when you update your wordpress core?

Jean-Baptiste Jung
Dec 22 2009 00:13

@Nicholas Cardot : Not at all, this is the very good point of this method :)

Matt
Dec 22 2009 00:56

How about if I wanted to change the title or link attribute of the custom logo, instead of the default “Powered by WordPress” and link to wordpress.org?

Is that possible through the functions method?

Tom
Dec 22 2009 01:09

This is brilliant, i’ve been looking for something like this. :)

Cheers!

p
Dec 22 2009 06:10

It doesn’t appear to change the link though (it still links to wordpress.org)… any way to change that too?

Stuart
Dec 22 2009 13:58

Good little recipe and great for premium theme providers and business client developed themes. Thanks for posting it :)

Thomas
Dec 22 2009 21:51

I have the same question as Matt and p, how do we change the link?

Bit pointless in changing the logo if it links to wordpess.org imo!

Can
Dec 23 2009 15:39

I like the idea… it will be like my own login :)

Matt
Dec 23 2009 18:25

@p, @Thomas:

Here’s how to change the Link & Title attributes for a custom logo.

//Custom Login Screen
function change_wp_login_url() {
echo bloginfo(‘url’);
}

function change_wp_login_title() {
echo get_option(‘blogname’);
}

add_filter(‘login_headerurl’, ‘change_wp_login_url’);
add_filter(‘login_headertitle’, ‘change_wp_login_title’);

Put that in your functions.php file

Thomas Carter
Dec 23 2009 22:02

Cheers Matt, had a feeling there was a hook somewhere! Makes this post a whole lot more useful now!
Happy Holidays.

mars
Dec 24 2009 03:59

that’s a cool little trick, thanks.

AJ
Dec 30 2009 00:12

I just wrote an article a few days ago on how to change the look using a plugin (which works really well). But this is a great alternative for those not wanting to mess with any plugins.

Tony Virelli
Dec 30 2009 00:28

This is perfect when combined with Matt’s code to change URL and Title.

Pete
Dec 30 2009 08:26

I’d love to see this as a simple plugin with input fields for the image location url and the link of the image… anyone? :)

Kiran Kumar
Jan 01 2010 12:10

I was looking for this for a long time thanks for the tip

palPalani
Jan 05 2010 13:25

excellent tip!! thanks for sharing!

Michel
Jan 06 2010 15:10

Many thanks, this small things makes a big difference wen presenting the site to a customer ;)

Mat
Jan 06 2010 21:10

I’m getting this warning:

Warning: Cannot modify header information – headers already sent by (output started at /home/look/public_html/wp/wp-content/themes/wp-theme/functions.php:61) in /home/look/public_html/wp/wp-login.php on line 290

Warning: Cannot modify header information – headers already sent by (output started at /home/look/public_html/wp/wp-content/themes/wp-theme/functions.php:61) in /home/look/public_html/wp/wp-login.php on line 302

My custom logo appears but that appears as well.

What did I do wrong?

Mat
Jan 07 2010 18:45

I have solved my problem. It seems that this is a common problem when editing the functions file.

Make sure there is absolutely no white space after the close of your php tag. I had a few extra spaces (line 290 was just a blank line). I deleted the blank stuff and everything worked perfectly.

Lars Tong Strömberg
Jan 07 2010 22:30

Very neat piece of code creating a big impression! Great tip!

Josh
Jan 10 2010 00:46

Cool tip that seems very easy to do. I am amazed at how much can be modified using functions.php.

shashank
Feb 21 2010 00:35

HEY could anyone tell me if i upgrade to any other 2.x wordpress version ,would my customizations get wiped off?

As in, all efforts in vain?

Please let me know

jr
Mar 23 2010 17:57

I get the following error:
Fatal error: Call to undefined function: add_action() in /home/…/wp-includes/functions.php on line 3648

Any idea why?

BoogY
Apr 01 2010 16:11

Hello there, I have the same problem to. but only if I put add_action(‘login_head’, ‘my_custom_login_logo’);

after the function it’s giving me this error :

Call to undefined function add_action() in /home/httpd/vhosts/tuxien.org/httpdocs/wp-includes/functions.php on line 3645

Matt Chandler
Apr 08 2010 20:54

I am also receiving the “Call to undefined function add_action()” error. I have tried with the “add_action” both above and below the “function”

Any ideas?

Ed
May 21 2010 20:38

I added the code and the wordpress logo disappeared but my logo did not show up? Did I miss something? How do I add my logo?

HelloNingbo
Jun 02 2010 16:15

Hi!

THANK YOU for this great tip!

WPrecipes always gives clear and easy tips to setup.

For this tip, if some of you don’t see their new pic, you might have been confused with the URL.
As I like ‘hard’ url, I put it that way and show you my code below. Hope it can help some of you:

function my_custom_login_logo() {
echo ‘
h1 a { background-image:url(http://www.xxxx.com/wp-content/themes/xxxx/images/login_image.gif) !important; }
‘;
}

add_action(‘login_head’, ‘my_custom_login_logo’);

Of course your image will replace the original one so there is a size to respect. Your picture must have the following size: 333×85

Finally I have 1 question myself :-)
The image is showing up perfect but still linking to wordpress.org.
Any idea how I can (simply) remove this link?

Thanks!
Roger

HelloNingbo
Jun 02 2010 17:12

Sorry Matt (Dec 23 2009), when I saw your comment/tip, I already had asked how to change the link in my previous post.

Now your tip is great but I even found simpler (in my opinion) for an easy way to customize the link of a new fresh login logo.

Just replace the ningbohotelreview below with your URL and then copy/paste the code in your functions.php. That’s all :-)

//Change link from new WP login logo (default is wordpress.org)
function put_my_url(){
return “http://www.ningbohotelreview.com/”; // your URL here
}
add_filter(‘login_headerurl’, ‘put_my_url’);

Hope this helps!
Roger

Wayne sutton
Jun 06 2010 05:22

Thanks for the blog post and comments. Just what I was looking for as I did not want to install another plugin.

Anonymous
Jun 24 2010 02:50

Roger (@HelloNingbo), your first code snippet worked great for me. Thanks! The second snippet produced an error: Parse error: syntax error, unexpected ‘:’

Matt’s code (above in comments) didn’t do anything to my image title and linked url. My custom login logo is still linking to wordpress.org.

Has anyone else had this problem? If so, did you find a way to get rid of the WP url and image title?

Stewart McKie
Jul 19 2010 19:13

I couldn’t get URL change to work either on WP 3.0 with either Matt or Ningbo’s code but no matter. Thanks to Rami, Matt and Ningbo for sharing.

dw
Jul 24 2010 03:49

For those of you having trouble with Matt’s code — note that copying from this page for me, produced none standard apostrophes in the code.

Try deleting/reentering them and the code should work fine.

Trackbacks:

Leave a Comment

* Name, Email, Comment are Required
RSS FEED
 FOLLOW ME
Follow me on Twitter SUBSCRIBE BY EMAIL

RSS WordPress discounts!