How To Add Author Avatar and Bio to Posts on WordPress and WPMU

How To Add Author Avatar and Bio to Posts on WordPress and WPMU

Somebody asked on Twitter for a way to add author avatars to posts, so this tutorial is partially in response to that. It’s also a helpful community building tool, because readers know where they are and who is speaking to them. This is a quick hack that will instantly add more personality to your posts, especially when you have lot of blogs running on your network and you’d like to give more detail about the authors. Just pop this little hack into your functions.php file and voila! You’ll get a little something like this:

authorbio

I want to credit Lam Nguyen for this helpful little hack that I found in his post on this topic.

function get_author_bio ($content=''){
    global $post;

    $post_author_name=get_the_author_meta("display_name");
    $post_author_description=get_the_author_meta("description");
    $html="<div class='clearfix' id='about_author'>\n";
    $html.="<img width='80' height='80' class='avatar' src='http://www.gravatar.com/avatar.php?gravatar_id=".md5(get_the_author_email()). "&default=".urlencode($GLOBALS['defaultgravatar'])."&size=80&r=PG' alt='PG'/>\n";
    $html.="<div class='author_text'>\n";
    $html.="<h4>Author: <span>".$post_author_name."</span></h4>\n";
    $html.= $post_author_description."\n";
    $html.="</div>\n";
    $html.="<div class='clear'></div>\n";
    $content .= $html;

    return $content;
}

add_filter('the_content', 'get_author_bio');

This hack will need to be present in the functions.php file of each of the themes that you make available to your users on your site, if you want the author bio section to show on their posts as well.

After you add this little piece of code, use your Firebug or whatever other tool you like, to target your selectors so that you can make the bio box pretty with CSS. Enjoy!