How To Show Author Image Next To Post Title In Genesis?

The Genesis Framework, as many of you might know, is the most popular framework for WordPress, and indeed one of the most powerful ones. It allows you to build a customized websites, and make use of the many action and filter hooks inherently present, on top of the default WordPress ones. We ourselves are using the framework on two of our sister blogs. So we thought our readers might like a few genesis tutorials. In this post, we'll talk about how to add an author avatar next to post titles on home page, category pages, and post pages on a WordPress Blog.

WordPress Hooks

At the core of a WordPress blog lie Hooks. And there are two types of hooks; Action hooks, and Filter hooks. Now their detail will be left to another post, but for now, let's take a look at the basic overview of Actions and Filters.

Hooks enable us to literally hook into parts of a WordPress page when it is loading, so that we can add, delete or modify data and take certain actions behind the scenes before the final page is displayed to a reader. There are two types of hooks; action and filter hooks.

Actions are events that occur on a WordPress page - for example, certain resources loading, certain facilities becoming available, etc. Action hooks allow us to add or delete certain events. Filter hooks allow us to modify events.

For example, on a typical WordPress blog homepage, you see a list of some of the latest posts. Things like the post titles, featured images, excerpts etc loading are events. But if I were to convert all the words in the post titles to upper-case, then I'd have to use a filter hook. Similarly, an action hook will let us display a list of our posts (when designing a custom theme), but a filter hook will be used to alphabetically sort those posts (instead of the default WordPress sorting by date).

Adding author avatar to post title

Now that you have a basic understanding of WordPress Hooks, we can now add an author avatar using hooks. Almost all the theme customization in WordPress is done via action and filter hooks. Now you can add the avatar using actions as well as filters. Let's take a look at each in turn.

Note: For the purpose of this tutorial, you will have edit a theme file. So it is best that you keep a backup in case something goes wrong. The file in question is the functions.php file, which you can find by going into Appearance from your WordPress dashboard, and then clicking on the Editor. You can then select the functions.php file from the sidebar on the right.

Using the action hook

We will first create a function to display author avatar, and we'll then plug that function into a hook. See the code below.

function custom_post_author_avatars () {
echo '<div style="float:right">'
. get_avatar (get_the_author_id (), 40)
. '</div>';
}
add_action ('genesis_before_post_title', 'custom_post_author_avatars');

The function name 'custom_post_author_avatars' can be changed to anything, but make sure it is something unique, because you'll get a lot of errors if another default function of the same name already exists.

You can change the style for the div tag that encloses the image. I've set it to float right, so that my image will display on the right side of the post. You can float it left, and then apply some margin or add a border and padding, or whatever you fancy.

get_avatar is a pre-defined function, and so is get_the_author_id (). Make sure you don't change them.

genesis_before_post_title is an action hook that executes right before a post's title is displayed. You can use similar hooks such as genesis_after_post_title, genesis_post_title, and genesis_before_content for a similar effect (but with varying image placement of course). See here for a full list of genesis hooks you can hook into and add an action.

Final thoughts

You can achieve the same task by removing the genesis_do_post_title function from the genesis_post_title hook, and then using the same hook to add your own custom function that displays post title enclosed in a H2 tag, along with the author avatar. Another possible way to do is to add your custom function to the filter genesis_post_title_output, and in that function, displaying the post title text, along with the image.

All these methods work fine, but they're not efficient, and are definitely not the best way to do the job. Therefore, you can simply hook a custom function of your own to the genesis_before_post_title hook, like I did in this tutorial, and get the job done!

I know this might be confusing for some of you, but I am here to help! Just feel free to ask in the comments section below. Cheers :)

Pin it

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

Unknown 10/23/2013