How To: Add Gravatars to Author Pages

[evanw]

Recently, I wanted to make the Author page (author.php) a little more robust by replacing the static image with Wordpress Gravatars (Global avatars - http://www.gravatar.com - which are assigned to your Wordpress email address). This gives individual authors the ability to change their pictures independently without uploading any files to the server.

I also added a few conditional tags to display contact information if provided in the "Your Profile" section of Wordpress. If an author enters their website, email address, or Twitter ID, it will automatically be displayed on their profile. I have hijacked the "Yahoo Instant Messenger" field in the profile section for entering your Twitter username so keep that in mind.

Please note that these changes require Wordpress 2.8 because I used the new author meta template: http://codex.wordpress.org/Template_Tag ... uthor_meta

This code starts at approximately line 7 in author.php.

		<div class="postarea">
        
			<?php $recent = new WP_Query("showposts=1"); while($recent->have_posts()) : $recent->the_post();?>
                
			<?php $curauth = (get_query_var('author_name')) ? get_userdatabylogin(get_query_var('author_name')) : get_userdata(intval(get_query_var('author'))); ?>
			<h5><?php echo $curauth->display_name; ?></h5>
		   
                <div class="author" id="authorinfo">
		     

		
                    

<?php if (function_exists('get_avatar')) { echo get_avatar(get_the_author_meta('user_email', $curauth->ID), '80'); }?>

                    

                    <?php echo $curauth->description; ?></p>
					


					<?php if (get_the_author_meta('yim', $curauth->ID)) { ?>
					

Twitter 
					<?php } ?>
					


					<?php if (get_the_author_meta('user_url', $curauth->ID)) { ?>
					| Web 
					<?php } ?>			

 
					<?php if (get_the_author_meta('user_email', $curauth->ID)) { ?>
					| Email</p>
					<?php } ?>							
					
                </div>
<div style="clear:both;"></div>

You'll also want to add this code to your style.css file to handle the Gravatar image.

#authorinfo img {
	margin:0px 10px 13px 0px;
	padding:2px;
	float:left;
	border:1px solid #C0C0C0;
}

Please let me know if you have any questions! You can view this code in action here.

[Craig Tuller]

nice share!