HowTo: Set A Custom Gravatar Image In Wordpress 2.7+
Posted in Design Articles, HowTo and Tutorial | 70 Comments »
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:
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.
As always: before making your next coffee you should share this article on your favorite social website. Your vote is highly appreciated! After you’ve finished voting and making your next coffee or tea you could subscribe to my RSS-Feed, discuss this article or buy me my next coffee 
About Matthias
Discuss (70) |
Digg This! |
Save to Del.icio.us |
Stumble It! |
Float This!
that is an amazing answer to all of my gravatar-problems…
no really, great post !
Awesome stuff, thanks for the info.
Hi koen and Matt, glad you enjoyed my article!
Thanks you saved me loads of time.
How could WordPress leave out something so simple?
Brilliant! I use a random image generation script for my default avatar and it worked great with this.
huhu… why can’t i make it work?! T___T
ooops!!
sorry for my previous comment…
i made it!! yey!
Thanks a lot there mate!!!
^____^ weee
Appreciate the article. Avatars are showing up but they’re not proportioned correctly. Any idea why? (Of course, they’re the least of my problems right now. LOL)
Ah, nevermind. I am tired and not paying attention to my CSS. Thanks, this works like a charm!
Thanks it worked great!
Ditto – worked like a charm, and I don’t even have the latest comments.php structure in my theme. (something I shall have to remedy, of course…)
Thanks again.
Thanks for all your comments, glad the article was helpful for you.
Thanks. I’ve been looking for this forever!
I don’t think I’m understanding what syntax to use for the theme name … you say replace YOURTHEMENAME with the name of my theme. I’m using a child theme whose name is three words (Dragib Child Theme) that draws on its parent (Dragib Parent Theme). These sort of names w/ spaces don’t seem to work in this context … shd I be using the child/parent theme directory name instead?
Hi doug, in the case of spaces in your theme name you would have to encode the space: just put “%20″ (without the quotes), where you have a space in the name of the theme folder. That should do it
Hi, thx for your post. The default image path can be defined without editing the functions.php. Just replace the path here: <?php echo get_avatar($comment,$size=’48′,$default=” ); ?>
Interesting… I switched themes, and couldn’t get this to work at all. But what #16 – Tom said made sense; I just added the link to the custom image in the part of the 2.7 comments loop that’s in functions.php, and it works again.
No need for the chunk of code you gave after all. (I’ll keep it on tap for other themes, though, just in case.)
Hi Tom, as I’ve written in my article at the beginning, your provided code just works without using the new Wordpress 2.7 <?php wp_list_comments(); ?> snippet or when writing a callback function in functions.php
So, of course, you can use this code from Wordpress prior to 2.7 and it will still work with Wordpress 2.7. But you can’t use the new wp_list_comments function and the benefits of it.
Like Doug, I’m having some trouble — maybe I just don’t get it. I’m using the “Almost Spring” theme. The directory itself is actually called “almost-spring,” but its theme name is “Almost Spring,” with a space.
When I attempt to replace YOURTHEMENAME with “almost-spring,” my whole site breaks, and the parse error says it’s due to an unexpected “-”. When I attempt to replace YOURTHEMENAME with “Almost%20Spring” my whole site breaks, and the parse error notes an unexpected “%.” The same occurs when I attempt “Almost+Spring” out of desperation.
hi Jenn and also doug, sorry my writings were confusing to you. The important thing here is to use no special signs or even a space. So Jenn, you would have to use “almostspring” here. And be sue to have no new lines after the closing of the php call in the functions.php
Hmm, very cognitive post.
Is this theme good unough for the Digg?
Firstly, great site design.
Thanks for the post. Been wanting to change the default avatar.
T.
Got this to work on my site, thanks for the write up!
-Ricardo @ NurtureYourWealth
A really nice info there. Just finished installing it on my Blog. Works great
No code warnings anymore, but my avatar image doesn’t show up. Perhaps this is the problem; what goes here: ‘GRAVATAR NAME DISPLAYED IN WORDPRESS’ – vielen Dank!
Hi Gerhard, basically you can write anything here and this is what is displayed in the wordpress backend beside your custom gravatar. Does your custom gravatar doesn’t show up in the backend listing at all or just not in your comments on the front end?
Hi, I put the code into “functions.php”, and my custom icon showed up in the admin as advertised. But when I clicked on it to be the default gravatar I got the following message:
“Warning: Cannot modify header information – headers already sent by (output started at /home/mysite/public_html/wp-content/themes/madworld/functions.php:3) in /home/mysite/public_html/wp-includes/pluggable.php on line 850″
What does that mean? Thanks in advance.
E.
@Ed I got the same error. No custom gravatars for me :\
this is great. exactly what i was looking for.
Thank you.It’s wonderfull.
thanks for sharing us
Thank you so much for sharing this tutorial.
I am very very happy
ee! I <3 your site layout.
I was actually looking for information on just plain resizing the gravatar (WP newbie alert), put your post pushed me in the right direction all the same. Many thanks!
I was also curious about where to find the actual code the wp_list_comments() function is referencing. I’m interesting in adding a border to mine and am not at all sure of how to go about this. Any advise? I’m slowly getting a handle on all this php, but not quite there yet.
-To your success,
Mina
The code added to the very end of functions.php works great on my test site running on local machine through wamp. However, when I copy the same code to functions.php on my server, I get the same error over and over, even though I have checked and rechecked for spaces. Here’s the error:
Warning: Cannot modify header information – headers already sent by (output started at /home/wellhous/public_html/wordpress/wp-content/themes/Influx/functions.php:330) in /home/wellhous/public_html/wordpress/wp-login.php on line 255
Here’s the code:
etc….
add_action(‘wp_head’, ‘mytheme_wp_head’);
add_action(‘admin_menu’, ‘mytheme_add_admin’); ?>
Line 330 is the <?php just before add_filter.
Any help anyone? I’m stumped.
Thanks.
Whoops.
The code didn’t copy to comment correctly. Here it is again. Sorry.
etc…..
add_action(‘wp_head’, ‘mytheme_wp_head’);
add_action(‘admin_menu’, ‘mytheme_add_admin’); ?>
I fixed it. There really can’t be a blank line before the <?php part of this code. Even though there are blank lines all over the functions.php file. And even though wamp accepted the blank line. Weird.
Hi Jan, yes blank lines before or after your functions code in functions.php will make WordPress go crazy. Glad it worked for you in the end.
HowTo: Set A Custom Gravatar Image In Wordpress 2.7 › Blog › kremalicious.com » Matthias Kretschmann | Photography & Design great article thank you.
Great guide…so happy that I found this
) Thx a million!
very nice , great article thank you.
Great tutorial-thanks for providing information.it is very timely.
I am so glad I found it. It is easy to understand and fun to read.
Love your writing style and the design of your blog, your blog is great thanks for the info
Marvelous! What a clear and understandable great post you have above. You wrote so many good point which assisted me so much. I have found many informative point here.
Best wishes!
Wow. This is very useful. I’m on Wordpress. to throw on Wordpress: http://www.picktorrent.com Very useful article. Hurray!
I tried your code and got a code error (unexpected < on line 24). My custom avatars has been working for some time, but after the upgrade to WP 2.8.2, some of the comments avatars are 125×125 instead of the specified 50×50; source code says avatars are 50×50. I thought this code might solve that problem. Do you know what I should do? Thanks very much for the great advice!
thanks a lot…
I made one error and my wordpress went mess up as I couldn’t log in but had to go thru FTP to edit em. Argh!
very nice thanks a lot..
Matt…thanks so much! Started working with the Web way back in ‘94 but drifted away for a while. Finally getting back into this and wow, a lot’s changed.
Started a WordPress site last week, and the Gr/Avitars were driving me nuts. Turns out there was a defect in my template and, thanks to you I tracked it down.
I’m using a black theme also, and will be back soon to Firebug your site, so I can smooth out the rough edges in my style sheet.
I’ll be keeping my eye on you! Sorry…getting punchy after a long week where almost everything is new again. Cheers,
I thank for the knowledge
Heads up!
I can’t understand how Wordpress missed out on such a simple but important feature.
Matthias to the rescue though!
Well, you should not using
get_bloginfo('template_directory')in functions.php.Use
get_stylesheet_directory_uri()instead …I use a child theme and my custom gravatar kept displaying as a broken image. This was the perfect solution! Thanks.
That the best idea i’ve ever met,Thanks for your great ideas.Enjoy it!
very nice tutorial. thank you
Awesome, that you, that worked great and was easy to setup.
How do I add a link to the gravatar image?
I don’t think it’s possible…
Very nice, thanks.
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
Excellent trick. I will keep this in my wordpress hacks to use it when i create my next wordpress theme. thanks for sharing.
Works in 2.8.6 – So you can update your headline
And thanks alot!!
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
Что делать – ума не приложу
it works great !!
thanks for share Matthias !
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"
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 \mytheme\wp-includes\plugin.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
let me try that path in browser “view source” again:
”
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'
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
Hi Mat,
Its really wonderful tut, I have applied the same to my blog http://mydrizzle.com and works perfectly, keep more stuff coming.