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!

34 Responses

Aug 02 2011 18:51

This is one of my favourite, simple WordPress hacks.

Aug 03 2011 14:05

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

Aug 03 2011 20:35

This is very simple. Kill plugins. :)

Aug 03 2011 22:56

Maybe citing the original source would be better: http://primegap.net/2011/01/26/wordpress-quick-tip-custom-wp-login-php-logo-url-without-hacks/

Aug 03 2011 23:02

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.

Oct 28 2011 02:58

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.

Dec 25 2011 20:40

This code works fine.

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

Feb 02 2012 09:48

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”);

Feb 29 2012 15:38

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

Mar 30 2012 14:14

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 ???

May 14 2012 14:21

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).

May 17 2012 09:57

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).

May 29 2012 10:49

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.

Jun 28 2012 08:20

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?

Jun 28 2012 10:36

Just use a plugin..

Jun 28 2012 22:46

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

Jul 01 2012 06:19

why change what works?

Jul 06 2012 14:42

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!

Jul 11 2012 00:31

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. :D

Jul 11 2012 17:11

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.

Jul 12 2012 09:58

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

Jul 18 2012 14:26

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

Jul 23 2012 01:53

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.

Aug 01 2012 06:09

Nice info..

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

Aug 01 2012 23:01

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

Aug 22 2012 02:33

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.

Sep 01 2012 17:56

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.

Sep 16 2012 08:29

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.

Jan 13 2013 17:39

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.

Jan 25 2013 16:50

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/

Mar 02 2013 05:05

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

Mar 19 2013 12:16

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

Apr 02 2013 16:34

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

Apr 28 2013 17:47

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”);

Trackbacks:

Leave a Comment

* Name, Email, Comment are Required

WP Theme of the week

Sponsored Likebox