How to Add Author Avatars to Post Info

How to: Add Author Avatar to Post Info

A couple of years ago we did some home renovations and I found myself drooling endlessly at, a site full of beautiful home interior photos. Aside from all the “house porn,” there’s a site design element I really like – they add author avatars (profile pic) next to the author’s name (post info) at the beginning of posts.

Check out Nora’s photo by her byline:

Houzz Example with Author AvatarIn this tutorial, I’ll show you how to add an author avatar along with the post info on your site. Note this tutorial is specific for people using the Genesis Framework (<– That’s an affiliate link, watch out!).

Step 1) Decide Where You Want to Add the Author Avatar

I’ll give two code examples here – both succeed in adding the author’s avatar between the post title and the entry content, but each offers a slightly different approach.

Note that you’ll end up adding some custom styling regardless of which method you choose.

Method A: Hook author avatar on genesis_entry_header

This method produces what I’ll call the “author avatar sandwich.” It outputs the author avatar (which I’ve wrapped in a <div> tag with the class “author-avatar”) between the entry-title tag and the entry-meta tag.

Author Avatar SandwichThis method makes styling a little more difficult — at least for my purposes — so I prefer the next method.

Method B: Filter genesis_post_info to include the author avatar

In this method, I use a <span> with class=”author-avatar” and run it through the genesis_post_info filter to output it as a part of the post info. See how the markup changes here:

Author Avatar in Post Info

It’s important to note the <span> tag here instead of a <div> like the previous method. In CSS, a <div> is a block element (think display: block;), which would screw things up. On the other hand, <span> displays inline (or however I specify) and allows it to snuggle nicely within the entry-meta tag.

Step 2) Add the Code to Your Site

I feel like a broken record saying this, but maybe this is your first time on my site and you haven’t heard it before… Always work with caution when adding code to your site – especially code you copy/paste from somewhere on the web.

Those caution disclaimers aside, add one of the following snippets to your site’s functions.php file or, if you are a Genesis Extender user, add it to your functions box.

Method A Code

<?php // remove this line
* Hook author avatar by post title on single post
* @uses get_avatar() <>
* @uses get_author_posts_url() <>
add_action( 'genesis_entry_header', 'cd_author_gravatar' );
function cd_author_gravatar() {
if ( is_singular( 'post' ) ) {
$entry_author = get_avatar( get_the_author_meta( 'email' ), 64 );
$author_link = get_author_posts_url( get_the_author_meta( 'ID' ) );
printf( '<div class="author-avatar"><a href="%s">%s</a></div>', $author_link, $entry_author );

Method B Code

<?php // remove this line
* Add author avatar to post info output
* @uses get_avatar() <>
* @uses get_author_posts_url() <>
add_filter( 'genesis_post_info', 'cd_post_info_filter' );
function cd_post_info_filter( $post_info ) {
// get author details
$entry_author = get_avatar( get_the_author_meta( 'email' ), 64 );
$author_link = get_author_posts_url( get_the_author_meta( 'ID' ) );
// build updated post_info
$post_info = sprintf( '<span class="author-avatar"><a href="%s">%s</a></span>', $author_link, $entry_author );
$post_info .= '[post_date] by [post_author_posts_link] [post_comments] [post_edit]';
return $post_info;

Note in Method B that we don’t do a conditional check to see if we’re on a single post. That’s because the genesis_post_info() function already performs a check, so including it again is redundant. If you’re ever in doubt about what/how a Genesis function behaves, just open up the source code for Genesis, do a universal search through the files for that function, and take a gander.

In case you’re wondering what the number 64 is doing in that get_avatar() function, it specifies the size (in pixels) of the avatar returned.

Step 3) Style It!

At this point, your happy, smiling author avatar will show up on your single posts. All that’s left to do is add some CSS to make it look like you want. I won’t go into detail about styling, as that will really depend on your site, but here are a couple of pointers:

If you’re using Method A…

  • Try adding a float: left; and a margin-right: 10px; to .author-avatar to give it a little breathing room
  • You may need to add a clear: both; to your .entry-content if it’s trying to wrap around your .author-avatar

If you’re using Method B…

  • Throw an overflow: hidden; on .entry-header .entry-meta along with a little padding and a background color to make a box out of it.
  • Spice up .author-avatar img with a border-radius: 100%; to get a round photo. Because, you know, round is funny.

That’s it! Have fun styling and profiling.

13 thoughts on “How to: Add Author Avatar to Post Info”

  1. Hi ,

    Thank you for this tutorial. It works great!

    I want to central align both the avatar and the post info (inline) but the post info only move to the centre. How do I central align the author avatar inline with the post info/entry meta? can you please help.

Leave a Comment

Your email address will not be published. Required fields are marked *

Carrie Dils uses Accessibility Checker to monitor our website's accessibility.