How To Add Gravatars For The Post Author in WordPress

By Ian Stewart | April 26, 2008

Now that Gravatar support is part of the WordPress core adding them into your WordPress theme is easy. Adding them to your comments has been documented. How about adding them to your post titles to highlight the comment author? Within the loop? That’s fairly easy too. Here’s the code:

<?php echo get_avatar( get_the_author_email(), '80' ); ?>

Pretty simple, huh? get_the_author_email outputs the post author’s email and the “80” is the size of the avatar image in pixels (you can change that). How this will look depends on how you use it; where you put it in the theme (it has to be in the loop!) and how you style it.

Want an example? I had to figure this out for an upcoming project so…

Author Gravatar Example

Look at that frighteningly intense young man there in black and white. Good grief, it’s me! The author of the post! The code, it works! It works!

Ahem. Excuse me. I get a little excited about these things. Good luck using it in your own theme!

By the way, did you know WordPress has built in email protection from spam bots (read Disguising Your Email)? I didn’t. Neat.

Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL.

13 Comments

  1. Jason Simon
    Posted April 27, 2008 at 9:19 pm | Permalink

    That’s pretty cool Ian. I enjoying reading your WordPress tips and your new Amazon bookstore looks cool. I gotta find some time to read your creative thinking recommendations.

  2. Ian Stewart
    Posted April 28, 2008 at 5:14 am | Permalink

    Thanks, Jason. That reminds me: I forgot Thomas Kuhn.

  3. Yan
    Posted April 29, 2008 at 1:56 pm | Permalink

    Cool! I love the idea. I’ve seen some sites with the author’s avatar right after the post but isn’t this gravatar thing more applicable in a multi-user blog?

  4. Ian Stewart
    Posted April 29, 2008 at 2:04 pm | Permalink

    Totally. I wouldn’t recommend using it unless you’re on a multi-user blog.

  5. Jermayn
    Posted April 30, 2008 at 1:35 am | Permalink

    might have to use this then as it would be handy especially for my website. Thanks

  6. Ptah Dunbar
    Posted May 8, 2008 at 3:27 pm | Permalink

    You’re totally talking about my latest theme. I implemented this technique in WPFreemium but instead of using the author’s email, I used their ID e.g. “the_author_ID();”.
    It took me hours trying to find out how this worked at first since I couldn’t find any documentation in the codex I had to dig into the core files.

  7. Ian Stewart
    Posted May 8, 2008 at 4:48 pm | Permalink

    The theme you’ve come up with is a great example what I’ve outlined, Ptah. Very cool.

    And it’s totally frustrating when you know, in theory, you can do something and quickly realize you’re going to have to figure out how to do it yourself. Except of course when you figure it out. Then, well, that’s awesome. :)

  8. mark
    Posted May 9, 2008 at 10:05 am | Permalink

    hai ian, can you point which specific place to put the code, because i have not found where the loop is? in comment.php, single.php or where?

  9. Ian Stewart
    Posted May 9, 2008 at 10:24 am | Permalink

    That would be The Loop.

  10. Thomas
    Posted June 18, 2008 at 6:19 am | Permalink

    I still don’t understand exactly where i’m supposed to place the code. Where should i put it if i want it to look like in the picture? could you please show me?

  11. Ian Stewart
    Posted June 18, 2008 at 6:49 am | Permalink

    Where you put the code, Thomas, depends on the theme you’re using (remembering it has to be in The Loop) and how you style it, or position it, using CSS. Give it a try. It’s kinda fun.

  12. Thomas
    Posted June 18, 2008 at 7:03 am | Permalink

    Ok thanks for the quick reply

    I really don’t know much CSS, but i just discovered that the theme i use, apparently has a single php file for most of the loop stuff… Im going to try to mess around with that, ive managed to do a lot by trial and error before…

    By the way do you have any idea how i can find the part of the code that shapes the post headline area? like specific terms to search for or something. I also need to change the color of the headlines themselves, but thats probaly somewhere else…

  13. Leo
    Posted July 2, 2008 at 12:04 am | Permalink

    Hey, how u did put the align=”right” only to the gravatar image?
    can u put me the code u did use to get that exact style?

33 Trackbacks

  1. By How To: Adding the Post Authors Gravatar To Their Individual Posts on April 28, 2008 at 4:01 am

    […] up Gravatars to display with each individual post?   Over at ThemeShaper, Ian Stewart recently shared an easy way to do this.   You just need the following […]

  2. By Ultime dal fronte WordPress 18-2008 on April 30, 2008 at 11:46 pm

    […] mostra come aggiungere i gravatar per mostrare il volto dell’autore di un post, ecome costruire una navigazione tra le pagine di WordPress con Wp-PageNavi, come mostra la figura […]

  3. By WordPress Weekly News, 18-2008 on April 30, 2008 at 11:50 pm

    […] shows how to Add Gravatars For The Post Author in WordPress, and How To Build WP-PageNavi Into Your WordPress […]

  4. By FearlessFlyer.com » SimpleSkin Wordpress Theme on May 8, 2008 at 11:00 am

    […] wordpress known as SimpleSkin. Made from scratch using Small Potato’s guidelines. Included gravatar support from Themeshaper, and design influences from FreelanceSwitch and again Themeshaper. Free to […]

  5. By élet és könyvtár » Blog Archive » Szerzői avatarok a címek mellett on May 17, 2008 at 6:26 am

    […] ThemeShaper dobta múltkor azt a bejegyzést, ami azt írja le, hogyan lehet ezt a kis identifikáló ikont […]

  6. By How To: Adding the Post Authors Gravatar To Their Individual Posts | [Blog Tutorials] on June 7, 2008 at 8:59 pm

    […] to display with each individual post?   Over at ThemeShaper, Ian Stewart recently shared an easy way to do this.   You just need the following […]

  7. By 40+ Most Wanted Wordpress Tricks and Hacks on June 15, 2008 at 4:52 am

    […] Add Gravatar for post author […]

  8. By 40+ Most Wanted Wordpress Tricks and Hacks | 胡作非为 - 每天精彩文章推荐 - Best Articles of the Day on June 15, 2008 at 9:39 pm

    […] Add Gravatar for post author […]

  9. By 30个优秀Wordpress技巧 on June 16, 2008 at 7:49 am

    […] 2、显示作者Gravatar头像 […]

  10. By 30个优秀Wordpress技巧 | Yansen's Blog on June 16, 2008 at 8:04 am

    […] 2、显示作者Gravatar头像 […]

  11. By 30个优秀Wordpress技巧 | 半瓶可乐 on June 16, 2008 at 8:53 am

    […] 2、显示作者Gravatar头像 […]

  12. By 激战的人生 » Blog Archive » 30个优秀Wordpress技巧 on June 16, 2008 at 9:36 am

    […] 2、显示作者Gravatar头像 […]

  13. By WP.ORG.CN | 30个优秀的Wordpress技巧为您打造强大的博客 on June 16, 2008 at 7:37 pm

    […] 2、显示作者Gravatar头像 […]

  14. By 我要当站长–51dzz.com » 30个优秀Wordpress技巧 on June 17, 2008 at 2:03 am

    […] 2、显示作者Gravatar头像 […]

  15. By 米老虎的BLOG » Blog Archive » 40+最有用的WordPress技巧 on June 17, 2008 at 2:37 am

    […] 2.显示作者 Gravatar 头像 […]

  16. By 用友资讯 » Blog Archive » 30个优秀Wordpress技巧 on June 17, 2008 at 4:33 am

    […] 2、显示作者Gravatar头像 […]

  17. By PP BLOG# » Blog Archive » 30个优秀Wordpress技巧 on June 18, 2008 at 3:52 pm

    […] 2、显示作者Gravatar头像 […]

  18. By 9月森林 » 40+ Most Wanted Wordpress Tricks and Hacks on June 18, 2008 at 7:55 pm

    […] Add Gravatar for post author […]

  19. By Más de 40 consejos y trucos para Wordpress on June 18, 2008 at 8:10 pm

    […] Agregar Gravatar del autor de cada post, ver cómo. […]

  20. By 30个优秀Wordpress技巧 - 网络应用与资讯 on June 19, 2008 at 2:16 am

    […] 2、显示作者Gravatar头像 […]

  21. By 40 consejos y trucos Wordpress para dar a tus proyectos aspectos realmente diferentes. « Xyberneticos on June 21, 2008 at 9:57 pm

    […] Agregar Gravatar del autor de cada post, ver cómo. […]

  22. By 40 consejos y trucos para Wordpress | aNieto2K on June 23, 2008 at 10:05 am

    […] Añade gravatar del autor a los posts […]

  23. By 40 самых востребованных настроек/доделок/хаков для WordPress on June 23, 2008 at 11:41 am

    […] Добавляем к постам потрет/аватар автора […]

  24. By 40 Consejos y trucos para WordPress on June 23, 2008 at 12:28 pm

    […] Agregar Gravatar del autor de cada post, ver cómo. […]

  25. By 40 trucos muy buenos para wordpress | Wotevar on June 23, 2008 at 3:41 pm

    […] |enlace| […]

  26. By Mas de 40 trucos y hackeos para Wordpress | Pboza on June 24, 2008 at 11:05 pm

    […] 2. Añadir un pequeño avatar del autor del mensaje. […]

  27. By 40+ Most Wanted WordPress Tricks and Hacks | Blogging Tips on June 27, 2008 at 12:41 am

    […] Add Gravatar for post author […]

  28. By 40 Consejos para optimizar tu Wordpress » Comenta o Muere | Actualidad, Humor, Tecnología, Política, Ciencia, Música… y otros muchos temas de los que merece la pena hablar. on June 30, 2008 at 3:24 pm

    […] Añade gravatar del autor a los posts […]

  29. By Dicas para você melhorar seu Blog - WordPress | DanielCamargo on July 1, 2008 at 6:29 am

    […] Exibir o avatar dos autores dos posts […]

  30. By Cosas por hacer luego de instalar Wordpress | Durmiendo Afuera on July 1, 2008 at 6:08 pm

    […] Agregar Gravatar del autor de cada post, ver cómo. […]

  31. By vsFish » 30个优秀Wordpress技巧 on July 2, 2008 at 10:45 am

    […] 2、显示作者Gravatar头像 […]

  32. By 41 trucos y consejos para Wordpress « Helektron.com on July 2, 2008 at 12:03 pm

    […] Agregar Gravatar del autor de cada post, ver cómo. […]

  33. By Antibioticos « SoLo Se Que No Se NaDa on July 3, 2008 at 6:09 pm

    […] Agregar Gravatar del autor de cada post, ver cómo. […]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

By submitting a comment here you grant this site a perpetual license to reproduce your words and name/web site in attribution. In addition, you may find yourself fitter, happier and more productive. Comment away.

Subscribe without commenting