HowTo: Set A Custom Gravatar Image In WordPress 2.7+

Wordpress Logo by kremalicious

Sure enough I’ve upgraded immediately when WordPress 2.7 was released. Among all the other things that changed in this new version the comments functions got a massive overhaul. But the new comment loop with the new function <?php wp_list_comments(); ?> lacks the ability to quickly set a custom default gravatar or avatar image. But with some help of the functions.php file we can set the default gravatar image in the Discussion settings in the WordPress backend.

Before WordPress 2.7 I achieved a custom gravatar image on kremalicious.com with this code placed in the comments.php template file:

<?php if(function_exists('get_avatar')) {
        echo get_avatar( $comment, $size = '70', $default = '<?php bloginfo('template_directory'); ?>/images/gravatar.png' );
} ?>

So we were able to set a path to our image we wanted to use as the default gravatar image. But with WordPress 2.7 we have the new function <?php wp_list_comments(); ?> which pretty much simplifies writing comment template code. Although it has a parameter for the avatar size it doesn’t have one for setting a custom image like before.

But we can use the functions.php file in your template directory and add some lines to it: (If you don’t have a functions.php file just create one.)

<?php  
function my_own_gravatar( $avatar_defaults ) {  
    $myavatar = get_bloginfo('template_directory') . '/images/gravatar.png';  
    $avatar_defaults[$myavatar] = 'GRAVATAR NAME DISPLAYED IN WORDPRESS';  
    return $avatar_defaults;  
}  
add_filter( 'avatar_defaults', 'my_own_gravatar' );   
?>

Just set a name for your custom Gravatar image to show up beside the image in the WordPress back-end. The code above assumes you have your custom default gravatar image inside a folder called images inside your template directory. Change it to your environment if neccessary. After that a new entry in the WordPress backend under Settings > Discussions will appear with the custom image specified:

custom gravatar

And you can adjust the displayed size of the gravatar image by adding a parameter to <?php wp_list_comments(); ?> function in your comments.php file:

<?php wp_list_comments(array('avatar_size'=>70, )); ?>

And that’s it. As you would guess I pretty much prefer this way to adjust the gravatar image. But you’re free to write your custom comment callback function to exactly define the output of the comments. But it’s definitely too much if you just want to change the gravatar stuff.

94 Responses

    • Chris Mower

      I use a child theme and my custom gravatar kept displaying as a broken image. This was the perfect solution! Thanks.

  8. Sally

    Excellent article. Thanks for taking the time to share your info with the world. It sounds simple enough – even for a non-techie like me. I’ll give it a try.
    Cheers

  9. neel

    Excellent trick. I will keep this in my wordpress hacks to use it when i create my next wordpress theme. thanks for sharing.

    • krema

      jep, nice tip, thanks for that. Just added a + to the title so it’s clear this is a feature which needs at least WordPress 2.7

  13. Val Archer

    this page:

    http://wpengineer.com/add-avatar-to-wordpress-default/#comment-3662

    adds this to the first line:
    if ( !function_exists(‘fb_addgravatar’) ) {
    ***
    }

    but either way I can’t get either php to work. It just shows up as a blank image in settings, and the path in browser “view source” is:

    which doesn’t make sense. Why is it bringing gravatar into it? I have “Show Avatars” checked.

    The path in php is:
    get_bloginfo(‘template_directory’) . ‘/gr-pg/avat06.gif’;

    which should read in browser as:
    <img src="http://localhost/1gs/wp-content/themes/1green/gr-pg/avat06.gif&quot;

    I tried one solution on that other link, to add (although it shouldn’t be needed) but that didn’t work.

    The other suggestion “In the wp-settings.php plugins.php needs to be required before functions.php because plugins.php contains the add filter function” linking to:
    http://wordpress.org/support/topic/102858?replies=4

    I don’t know how to implement because “function add_filter” is in mythemewp-includesplugin.php

    but my 2.9.1 wp-settings.php looks like this:
    require (ABSPATH . WPINC . ‘/plugin.php’);
    require (ABSPATH . WPINC . ‘/default-filters.php’);
    include_once(ABSPATH . WPINC . ‘/pomo/mo.php’);
    require_once (ABSPATH . WPINC . ‘/l10n.php’);

    there’s no:
    require (ABSPATH . WPINC . ‘/functions.php’);

    so I can’t reverse the order.

    I also tried the suggestion above:
    get_stylesheet_directory_uri()

    but that also makes no difference.

    Do you perhaps know why I get a blank image in Discussion Settings and that funny browser path of src=’http://www.gravatar.com/avatar/etc?

    thanks, Val

  15. Val Archer

    let me try that path in browser “view source” again:

    src=http://www.gravatar.com/avatar/6e2c869ce80cd3fe413e001f1b26b1ec?
    s=65&
    d=http%3A%2F%2Flocalhost%2F1gs%2Fwp-content%2Fthemes%2F1green%2Fgr-pg%2Favat06.gif
    %3Fs%3D65&r=G' class='avatar avatar-65 photo' height='65' width='65'

  16. Val Archer

    Hi – I just discovered that – even with the funny path – it works in FF + IE6/7/8 + Chrome + Safari but does not work in Opera. I happened to be in Opera at the time! (vers 10.10)

    Do you perhaps have a fix for -op-?

    thanks – Val

  19. Jason Coleman

    PHP newbie here:
    That snippet of code could be exactly what I’m looking for, but knowing nothing about PHP and already having a pretty large function.php page already, I’m unable to figure out where in the existing code to place your code snippet. Any help would be great…I’m just a poor ole HTML and CSS guy. :(

  20. daniel

    Hello guys, i optimize my site with SEO, but i have a problem in gravatars.

    I use this funtion wp_list_comments(args); and works fine, but i see the source and i see this code

    my question is, how to add custom text in alt=”" if i use wp_list_comments(); any idea?

  21. cam mozaik

    Thanks a lot! I am just learning Information.
    And php and this was very easy to follow and helped a lot.
    You really took time to explain every little bit.
    Thanks again…

  22. cam mozaik

    Thanks a lot! I am just learning Information.
    Php and this was very easy to follow and helped a lot.
    You really took time to explain every little bit.
    Thanks again..

  23. hosting

    Thanks a lot! I am just learning Information of Subject.
    Php and this was very easy to follow and helped a lot.
    You really took time to explain every little bit.
    Thanks again…

  24. Khay

    Helloo! ^^

    I love your post! ^^ I’m planning to use this. I tried it but the avatar doesn’t load. =\ I uploaded my gravatar.png together with the layout folder.

    Why it isn’t working? =\

  25. Weon

    Just wanted to say a quick thank-you for this. Exactly what I was after and worked a treat.

    • Mijk

      But in WP 3.0+ you can:


      $default = urlencode(get_bloginfo('template_directory') . '/images/my-default-avatar.png');
      ...

      and it works then :)

  29. Mijk

    Sorry, my comment is broken up into two, feel free to remove those previous two.
    This is what I really ment:


    $default = urlencode(get_bloginfo('template_directory') . '/images/my-default-avatar.png');
    ...
    <?php echo get_avatar($comment,$size='55', $default ); ?>

  32. hand weights

    The important thing here is to use no special signs or even a space. So Jenn, you would have to use . And be sue to have no new lines after the closing of the php call in the functions.

  34. Katie @ Women Magazie

    This is cool, alternatively you can also write this short code in your theme’s function.php file


    add_filter( 'avatar_defaults', 'newgravatar' );

    function newgravatar ($avatar_defaults) {
    $customavatar = get_bloginfo('template_directory') . '/images/custom-avatar.jpg';
    $avatar_defaults[$customavatar] = "Custom Avatar";
    return $avatar_defaults;
    }

  35. Charlotte J

    I am using gravatar comments on my blog but running into some issues with them. You article really shed some light on how they work and I think i can figure it out. thank you, thank you, thank you!

  38. flour mill

    i am a new one to study using the wp system to build a blog that about the muisc.But I have a few problems about the picture show for customers.Thanks for you useful infomation for me.

Have Your Say

Be nice, don't spam. You can just use Markdown. Code snippets should be wrapped in <code> tags. Everything in between gets automatically encoded to HTML entities, wrapped in pre tags and syntax highlighted.