{"id":3531,"date":"2008-07-31T20:56:35","date_gmt":"2008-07-31T15:26:35","guid":{"rendered":"https:\/\/www.quickonlinetips.com\/archives\/?p=3531"},"modified":"2020-07-10T10:50:06","modified_gmt":"2020-07-10T05:20:06","slug":"how-to-add-gravatars-to-wordpress-themes","status":"publish","type":"post","link":"https:\/\/www.quickonlinetips.com\/archives\/2008\/07\/how-to-add-gravatars-to-wordpress-themes\/","title":{"rendered":"How to Add Gravatars to WordPress Themes"},"content":{"rendered":"

Add Gravatars to your WordPress theme. Gravatars<\/a> are a quick way to add a personal touch to your blog comments by displaying the avatar of the commenters alongside their comment. The latest WordPress versions incorporate Gravatar support<\/strong> by default (you don’t need a plugin anymore!). This article will show you how to add gravatars \/ avatars to your WordPress theme in a few minutes.<\/p>\n

1. Show Avatars in WordPress<\/h2>\n

First you need to enable your WordPress theme to display avatars. After logging into WordPress admin, go to Settings > Discussion<\/em> and for the Avatars.<\/p>\n

\"\"<\/p>\n

2. Add Gravatars to WordPress Theme<\/h2>\n

Then you will have to set the php code in your comments.php<\/strong> in the appropriate area where you want the avatars to appear (usually after the individual comments li<\/em> tags). Add this code there.<\/p>\n

<?php if(function_exists('get_avatar')) { echo get_avatar($comment, '40'); } ?><\/code><\/p>\n

If gravatars are enabled from your WordPress Admin settings, then this code will show avatars or will disappear. The “40” signifies a avatar size <\/strong>of 40px by 40px square, you can edit this to suit the size of your theme template.<\/p>\n

3. How to style the Gravatar<\/h2>\n

You basically need to style the .avatar<\/code> class<\/strong> displayed by the php code. Try some css examples below and edit it to blend with your blog design.<\/p>\n

#comments .avatar<\/strong> {\r\nfloat: left;\r\nmargin: 0;\r\npadding: 0 4px 0 0;\r\n}<\/code><\/pre>\n
or the position can be fixed to the top-left of the individual comments.<\/p>\n
#comments .avatar<\/strong>{\r\nposition: absolute;\r\ntop: 1px;\r\nleft :1px;\r\n}<\/code><\/pre>\n
You can also use img .avatar<\/code> <\/strong>to style the tags. Using different CSS styles, you can position or align avatars wherever you like.<\/p>\n
4. Optimizing Blank Avatars<\/h2>\n
Not all your commenters would have signed up for Gravatars. So what do you do with the blank avatar spaces? Showing the default mystery man<\/strong> or gravatar logo is not a good idea.<\/p>\n
\"\"<\/p>\n
Instead you can opt to display Identicons, Wavatars and MonsterID<\/strong> to get some automated visually appealing avatars. This will automatically generate some cool avatars for all your comments. I personally like the Wavatar.<\/p>\n
\"\"<\/p>\n
5. Hide NSFW \/ Adult Avatars<\/h2>\n
Gravatars are rated and you can opt to show family safe gravatars on your site only from the Avatar settings<\/p>\n
\"\"<\/p>\n
Well that’s it. Your blog theme is now gravatar enabled.<\/p>\n
Get a Gravatar <\/strong>– If you don’t have a gravatar already, Sign up for it today. With so many blogs supporting gravatars, it will give your comment better visibility. Get the new version of QuickPress theme, now supporting Gravatars.<\/p>\n","protected":false},"excerpt":{"rendered":"
Add Gravatars to your WordPress theme. Gravatars are a quick way to add a personal touch to your blog comments…<\/p>\n","protected":false},"author":4,"featured_media":3536,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[6],"tags":[49,17],"class_list":["post-3531","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogging","tag-tutorials","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/3531","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/comments?post=3531"}],"version-history":[{"count":0,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/3531\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media\/3536"}],"wp:attachment":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media?parent=3531"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/categories?post=3531"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/tags?post=3531"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}