How To Display The Author Avatar Inline With Post Info

Considering the fact most website visitors spend 80% of their time above the fold, its not a bad idea to consider floating an avatar of the post author to the left of where your post info is displayed.

If you’re running a multi author blog, this enables you to give credit and exposure to the author as well as keep your after content author box containing your brands information and logo.

avatar inline post info

There’s different ways to do this depending on which theme you’re running.

Here’s the code you can easily modify using your themes hooks and add at the end of your child theme’s functions.php file:

Display Post Author Inline On Single Posts Genesis

This code includes a conditional tag so the authors avatar only displays on single posts.

Here’s some sample CSS for single posts which you can easily modify.

.single .entry-header .avatar {
    margin-right: 20px;
}

Or this version

add_action( 'genesis_entry_header', 'entry_header_gravatar', 7 );
function entry_header_gravatar() {
    if ( is_singular( 'post' ) ) {
    printf('%s', get_avatar( get_the_author_meta( 'user_email' ), 70 ));
    }
}

Display Author Avatar Inline With Post Info Globally Genesis

This code displays the authors avatar after the title on all single posts and archive pages including your blog, home, author and category archives.

Change the size of the avatar image by modifying the value which is set as 40px in the code.

On top of this, you can also make your avatar image round.

avatar left of post info

Don’t forget there are several ways you can customize or remove post info meta data using code or the Genesis Simple Edits plugin.

Similar Posts


Comments

13 responses to “How To Display The Author Avatar Inline With Post Info”

  1. Hello sir,
    Thanks for this but need help related to it.I have maded my new site in which i have used freshlife theme and want to show a gravatar author image just close to title on every post excert with 43×43 pixel pic. http://i.imgur.com/vFTU4ux.png is example where i needed.
    thank you

  2. Kelli (@SweetLifeMommy) Avatar
    Kelli (@SweetLifeMommy)

    This is exactly what I’ve been looking for. Thanks! I’m using the Genesis child theme Mocha, which puts 1 full post on the home page along with excerpts below it. My question – do you know how I can show the gravatar on just that full featured post, but not on excerpts?

    1. Brad Dalton Avatar
      Brad Dalton

      Hi Kelli

      Its very easy to change the conditional tag to control exactly where you want the avatar to display and where you don’t.

      Do you only want it displayed on one single post or all single posts?

      1. Kelli (@SweetLifeMommy) Avatar
        Kelli (@SweetLifeMommy)

        Hi Brad, thanks for a quick reply! I’d like to show the avatar on single posts, which I’ve done easily by following your tutorial. I’d like to show it on any sticky post, and again, I’ve done that following your tut, but it does show the avatar twice when you click on the sticky post to open it as a single so I need help resolving that. More important, what I can’t figure out is how to show the avatar (what hook to use?) on the featured post on my home page. If you look at my home page, there is a full post, then 4 excerpts. How can I get the avatar to show on that full, featured post? My site is http://sweetnessoflife.com if you don’t mind taking a look? Thank you! 🙂

        1. Brad Dalton Avatar
          Brad Dalton

          Looks like you got it working Kelli or did you want it in another position?

          1. Kelli (@SweetLifeMommy) Avatar
            Kelli (@SweetLifeMommy)

            The position is good. The post on the home page you see was “sticky” but I’ve removed it so you can see that the full featured post on the home page isn’t showing the avatar. 🙂

          2. Brad Dalton Avatar
            Brad Dalton

            Please replace this line if (is_single() ) {

            with this if (is_single() || is_home() ) {

  3. Pretty useful. I’m thinking to develop a new theme for my personal project and this will become handy since the website is a multi-authors site.

    1. Brad Dalton Avatar
      Brad Dalton

      No worries Rudd.

      I would like to develop this code further so it aligns with the post info rather than displaying underneath.

    2. Brad Dalton Avatar
      Brad Dalton

      Just found the hook for genesis_post_info which you could use to display the avatar inline with the post info.

      1. Brad,

        With the new hooks for HTML5 what would the hook be or the code be to have the avatar be inline? I have a lot of CSS on my site right now to have it lined up correctly but I would much rather have it done with one simple code to be correct.

        Thank you! GREAT CODE

        1. Brad Dalton Avatar
          Brad Dalton

          Depends on your theme Angie.

          I have included some CSS you can tweak to make it easy for you.

          1. I am using just basic Genesis Child theme but thinking about moving to Eleven40 because of the grid loop going crazy.

            Right now I am tweaking everything with CSS.

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.