The Genesis Framework, as many of you might know, is the most powerful framework for WordPress. It allows you to easily build custom websites with fully pre-optimized functionalities for better search results. Many of you might be using it too and facing a problem because by default there is no hook function present in functions.php file of Genesis for showing post author avatar right before or after the post title.
Genesis Plus WordPress, Power Combo

What are Genesis Hooks?

At the core of your WordPress lie Hooks. Hooks are of two types; Action Hooks and Filter Hooks.

Action Hooks 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).

Show Post Author Avatar before Post Title in Genesis

After following the complete procedure you’ll finally end to something like this:

Post Author Avatar before Post Title

Post Author Avatar before or next to the Post Title in Genesis or any other WordPress Theme has a huge importance in terms of showing authority to the readers. This can be much helpful for multi-author blogs so that readers can easily understand which post is posted by which author otherwise it could be kinda confusing to recognize whose article they are reading.

NOTE: For the purpose of this tutorial, you will have edit your theme’s function 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.

To Add, Go to Dashboard >> Appearance >> Editor >> functions.php and add the code given below:

function custom_post_author_avatars () {
echo ‘<div style=”float: left“>’
. get_avatar (get_the_author_id (), 40)
. ‘</div>’;
}
add_action (‘genesis_before_post_title’, ‘custom_post_author_avatars’);

NOTE: Don’t change anything in the code otherwise it could create any parsing error which may result in permanent website freeze. Although you can change float: left to float: right if you want to show the Post Author Avatar after Post Title instead of showing it Before.

Final Words!

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.

Any of the methods would 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!

Need Help!

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

Source: My Blogger Tricks

KEEP CALM AND CUSTOMIZE YOUR WORDPRESS

7 COMMENTS

    • Thanks Abhirath for your comment and adding more value. Both Genesis and Thesis are the best and top-rated frameworks for WordPress. Both of them have their own cons and pros on each other. When I migrated from Blogger to WordPress, I used Thesis as my first Premium Theme and my experience was not so good that’s why later on I changed my framework to Genesis and enjoying it till the date with no compatibility issues. On the other hand famous bloggers like Neil Patel and Matt Cutts are using Thesis on their site. It depends on which one’s interface is understandable for you. Now the choice is yours.

  1. Thanks a lot for the tutorial. Was really Helpful. Highly Appreciate it.
    I am also using Genesis with Dynamik theme. Searched for adding this pic near post and found your blog.

    Really Easy Tutorial. Thanks Again.

    • Hello Susanta,

      I’ve checked the code and everything is working just fine. Make sure you have copied it completely. If still it shows that error, paste the code in a notepad file first. Then copy that code from notepad and paste it in your functions.php file. It will work. Let me know if still it is not working 🙂

LEAVE A REPLY

Please enter your comment!
Please enter your name here