Adding Custom Default Gravatars to Your Blog

by Rae Hoffman on 06/29/2009 · 14 comments | Branding

Killer Customizations

You may have noticed that the default avatar on the Outspoken blog for folks not registered with Gravatar is not the typical default Gravatars. Instead, it’s a grayed out replica of the bullhorn in the Outspoken logo.

Quite a few folks have asked me how we’ve done this, so I figured I’d give a mini tutorial for both regular theme users and Thesis users.

Regular Themes Via Comments.php

You’ll need to find the following code in the comments template of your theme:

<?php echo get_avatar( $comment, 40 ); ?>

and replace it with the following:

<?php echo get_avatar( $comment, 40, ‘http://www.YOURDOMAIN.COM/wp-content/themes/YOUR-THEME-NAME/images/YOUR-CUSTOM-GRAPHIC-HERE.jpg’); ?>

Once your done the change, you’ll need to save the comments file and ensure your custom graphic has been uploaded to the assigned destination. Because this will be specific to your current theme design, you’ll need to re-add this code should you change designs in the future as with any other theme edits.

Regular Themes Via Functions.php

Note that this code does not require you to edit your blog theme files, so if you change themes later, the code should still work providing the theme supports it. However, you will be editing core Wordpress files, so a word of caution. Open your functions.php file (this is NOT Thesis instructions, see further down in the post for those) and add the following code:

add_filter( ‘avatar_defaults’, ‘custom_gravatar’ );

function custom_gravatar ($avatar_defaults) {
$myavatar = get_bloginfo(‘template_directory’) . ‘http://www.YOURDOMAIN.COM/images/YOUR-CUSTOM-GRAPHIC-HERE.jpg’;
$avatar_defaults[$myavatar] = ‘NAME-YOU-GIVE-YOUR-AVATAR’;
return $avatar_defaults;
}

Upload the edited functions.php file and add the graphic you named in your code to the /images/ folder on your root domain. Next, head to your wp-admin panel and click on Settings > Discussion and click the radio button next to the custom default Gravatar you just added.

While this way of adding a custom Gravatar prevents you from having to re-add the code to new themes should you change your current one, you are editing a core Wordpress file and will need to re-add the code whenever you do a Wordpress update.

Thesis Instructions

Thesis users simply need to open their custom_functions.php file and add the following hook (if you’re not familiar with hooks, you can learn the basics here):

/* Add a Custom Default Gravatar */
if ( !function_exists(‘custom_gravatar’) ) {
function custom_gravatar( $avatar_defaults ) {
$myavatar = get_bloginfo(‘template_directory’) . ‘/custom/images/YOUR-CUSTOM-GRAPHIC-HERE.jpg’;
$avatar_defaults[$myavatar] = ‘NAME-YOU-GIVE-YOUR-AVATAR’;

return $avatar_defaults;
}
add_filter( ‘avatar_defaults’, ‘fb_addgravatar’ );
}

Upload the edited custom_functions.php file and add the graphic you named in your code to the /custom/images/ folder. Next, head to your wp-admin panel and click on Settings > Discussion and click the radio button next to the custom default Gravatar you just added.

The advantage to using Thesis over regular blog themes here is that you won’t need to redo this anytime you change layouts (as with the first one via comments.php file) or when Wordpress has an update since your code is located in the Thesis custom files and not your core Wordpress files. Just sayin’.

About the Author

Rae Hoffman

Rae Hoffman is the CEO and Co-Founder of Outspoken Media as well as the author of the often controversial Sugarrae Blog.

Get social with Rae at Sphinn | Twitter | WebmasterWorld

Share this Post

Stay Connected

Subscribe to the Outspoken Media feed via RSS or email and follow Outspoken Media on Twitter!

Related Posts

{ 14 comments… read them below or add one }

1 Joe Hall 06/29/2009 at 11:07 AM

Great tut! Working on a similar project as we speak!

Reply

2 Jennifer Kettlewell 06/29/2009 at 5:28 PM

Just checking out the default gravatar!

Sounds like a fun project to implement on my own blog.

Be Moxie!

Jen

Reply

3 jlbraaten 06/30/2009 at 9:18 AM

That was wonderful, Rae. If only I had Wordpress. Perhaps a Gravatars in Drupal is in order?

Reply

4 HotSauceDaily 06/30/2009 at 4:47 PM

Awesome Tut.
How would you go about creating a set or a few generic Gravatars to be selected at random, like Identicon (Generated) and others’ that have a few in their set? Or is that beyond the scope of this method?

Reply

5 Dave Reid 07/02/2009 at 1:44 PM

@jlbraaten: Gravatars for Drupal is really easy. http://drupal.org/project/gravatar

Reply

6 Rich Kent 07/05/2009 at 4:42 PM

Thanks for the tutorial! I’ll have to use it on my site.

Reply

7 Raj Alexander 07/06/2009 at 8:36 PM

Oh, the coding seemed to be confusing to me..
I am not so good in dealing with codes.
I am always upset when I see coding works….
But Anyways thanks for sharing the tutorial…

Reply

8 Rees 07/21/2009 at 6:56 PM

Hey Rae, I’ve picked up quite a few tips from you over on sugarrae.com. This looks like a great one, too!
However, I’m a bit befuddled as to why it isn’t working for me. I’ve copied in your code into my custom_functions.php file, changing the image name (visitor-avatar.gif) and the name I’ve given it for the Discussion menu (visitor) and yet I don’t see it there in WP. Any ideas? (Site: thegreenthree.com)
Thanks!

Reply

9 Rees 07/21/2009 at 10:49 PM

Ah, found what the issue was for me. The code above had smart quotes and my text editor didn’t strip that out for some reason. Also, I had to change ‘fb_addgravatar’ to ‘custom_gravatar’ since that appears to be the function being declared in the first part of the code.


/* Add a Custom Default Gravatar */
if ( !function_exists('custom_gravatar') ) {
function custom_gravatar( $avatar_defaults ) {
$myavatar = get_bloginfo('template_directory') . '/custom/images/visitor-avatar.gif';
$avatar_defaults[$myavatar] = 'visitor';

return $avatar_defaults;
}
add_filter( 'avatar_defaults', 'custom_gravatar' );
}

Now it works great! I was able to find my cute little custom avatar in WordPress Settings – Discussion – Avatars – Default Avatars. Thanks!

Reply

10 Rees 07/21/2009 at 10:51 PM

Heck, even in the code I entered in my last comment above you’ll see that smart quotes snuck in there! I’ll try one more time:

/* Add a Custom Default Gravatar */
if ( !function_exists('custom_gravatar') ) {
function custom_gravatar( $avatar_defaults ) {
$myavatar = get_bloginfo('template_directory') . '/custom/images/visitor-avatar.gif';
$avatar_defaults[$myavatar] = 'visitor';

return $avatar_defaults;
}
add_filter( 'avatar_defaults', 'custom_gravatar' );
}

Reply

11 Rees 07/21/2009 at 10:52 PM

Okay, so I retyped all of the quotes to make them un-smart quotes, but them in code tags, and yet they turned ’smart’ … that’s too smart for me.

Reply

12 Matt Cheuvront 07/23/2009 at 5:59 PM

Thanks for the awesome tutorial Lisa. Much appreciated!

Reply

13 Tsh 09/08/2009 at 3:05 PM

Thanks for this tutorial! When I put the code in my custom_functions.php, I get this message where I should normally select my image as the custom default:

Warning: call_user_func_array() [function.call-user-func-array]: First argument is expected to be a valid callback, ‘fb_addgravatar’ was given in /home/simplem4/public_html/wp-includes/plugin.php on line 166

Warning: Invalid argument supplied for foreach() in /home/simplem4/public_html/wp-admin/options-discussion.php on line 202

Any ideas why? Thanks so much in advance.

Reply

14 Jose 01/31/2010 at 8:00 AM

Thanks Rees,

your code works for me too!.

Kind regards.

Reply

Leave a Comment

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Want to add a picture to your comments here on Outspoken Media? Upload a picture at Gravatar to make it happen.

By clicking "submit" below, you are agreeing to abide by our comment policy.

Previous post:

Next post: