• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

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

  • Show Author Avatar Inline With Custom Post Info In Genesis
  • Add Author Avatar Before Single Post Entry Titles

Entry Meta

Reader Interactions

Comments

  1. mayank says

    February 14, 2014 at 11:57 am

    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

    Log in to Reply
  2. Kelli (@SweetLifeMommy) says

    May 30, 2013 at 2:22 pm

    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?

    Log in to Reply
    • Brad Dalton says

      May 30, 2013 at 3:05 pm

      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?

      Log in to Reply
      • Kelli (@SweetLifeMommy) says

        May 31, 2013 at 10:57 am

        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! 🙂

        Log in to Reply
        • Brad Dalton says

          June 1, 2013 at 2:03 am

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

          Log in to Reply
          • Kelli (@SweetLifeMommy) says

            June 1, 2013 at 10:30 am

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

          • Brad Dalton says

            June 1, 2013 at 11:20 am

            Please replace this line if (is_single() ) {

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

  3. Rudd says

    April 17, 2013 at 8:05 am

    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.

    Log in to Reply
    • Brad Dalton says

      April 17, 2013 at 8:08 am

      No worries Rudd.

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

      Log in to Reply
    • Brad Dalton says

      April 17, 2013 at 10:25 pm

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

      Log in to Reply
      • Angie says

        June 24, 2014 at 3:23 am

        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

        Log in to Reply
        • Brad Dalton says

          June 24, 2014 at 3:33 am

          Depends on your theme Angie.

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

          Log in to Reply
          • Angie says

            June 24, 2014 at 8:39 pm

            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 Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.