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 Houzz.com, 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:

In 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.

This 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:

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

Method B Code

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.