Best 2 Know

The Ultimate Blogging Resource

  • Advertising
  • WebHosting
  • Contact Us
  • Blogger
    • Blogger Templates
    • Blogger Tutorials
  • Browser
    • Firefox
    • Google Chrome
  • Google
  • Internet
    • Facebook
    • Twitter
  • Thesis
  • Windows
  • WordPress
    • WordPress Themes
    • WordPress Plugins
  • More
    • Linux
    • Review
    • Solutions
    • Announcements

How to add avatar next to post title in thesis

You might have seen many of the websites having their Authors avatar next to the Post title of their Respective posts. its mostly seen in the Multi Authored blog doing it so. is not difficult but its Lot more easier to do in thesis we can add Authors avatar in thesis.

Now lets go and add the Authors Avatar next to the Post title so that our Beloved Authors get some more credits.

Installation :

  1. Login to your WordPress Dashboard
  2. Go to Thesis >> Custom File Editor
  3. Select custom_functions.php and add the below code :
    function myavatar_post_title() { ?>
     
    <?php echo get_avatar( get_the_author_id() , 48 ); ?>
     
    <?php }
     
    add_action('thesis_hook_before_headline', 'myavatar_post_title');

    function myavatar_post_title() { ?><?php echo get_avatar( get_the_author_id() , 48 ); ?><?php }add_action('thesis_hook_before_headline', 'myavatar_post_title');

  4. Now time to add the CSS in custom.css :
    .custom .headline_area .avatar {
    float:left;
    border:3px solid #ddd;
    margin-right:1em;
    }

    .custom .headline_area .avatar { float:left; border:3px solid #ddd; margin-right:1em; }

We have successfully added Avatar next to the post title now time to customize it.

Customization :

How to Show Avatar only on Home Page ?
To Show the Authors Avatar on Home page we will use WordPress Conditional Tag :

function myavatar_post_title() 
if( is_home()) {
{ ?>
 
<?php echo get_avatar( get_the_author_id() , 48 ); ?>
 
<?php }
}
add_action('thesis_hook_before_headline', 'myavatar_post_title');

function myavatar_post_title() if( is_home()) { { ?><?php echo get_avatar( get_the_author_id() , 48 ); ?><?php } } add_action('thesis_hook_before_headline', 'myavatar_post_title');

How to change the Avatar ?
The avatar of the Author is pulled through Gravatar.com using the Authors Email ID. So to change the Avatar at Gravatar.

How to change the Border of avatar ?
Check the CSS we have added to custom.css just edit it.

How to show Avatar only on Post page ?

for showing Avatar on Post page we are going to use WordPress Conditional Tags again but this time instead of is_home() it will be is_single() i.e. :

function myavatar_post_title() 
if( is_single()) {
{ ?>
 
<?php echo get_avatar( get_the_author_id() , 48 ); ?>
 
<?php }
}
add_action('thesis_hook_before_headline', 'myavatar_post_title');

function myavatar_post_title() if( is_single()) { { ?><?php echo get_avatar( get_the_author_id() , 48 ); ?><?php } } add_action('thesis_hook_before_headline', 'myavatar_post_title');

How to change the Size of the Avatar ?
to change the size of avatar find the Number “48” in the Code and replace it with any the Number of size you want of avatar.

Hope you like the New Looks of your site and Enjoyed reading this Thesis Customization.

Subscribe via Email

Share this:

  • Click to share on X (Opens in new window) X
  • Click to share on Facebook (Opens in new window) Facebook
  • Click to share on Pocket (Opens in new window) Pocket
  • Click to print (Opens in new window) Print
  • Click to share on WhatsApp (Opens in new window) WhatsApp
  • Click to email a link to a friend (Opens in new window) Email

Related

April 26, 2011 Ritesh Sanap Thesis Customization Author Avatar, custom_functions.php, Thesis, Thesis Customization

Comments

  1. Tyler says

    January 6, 2012 at 3:08 am

    Really great post, Ritesh. I implemented this in about five minutes. Thanks!

    Reply
  2. Rasel Rony says

    March 2, 2012 at 3:21 pm

    nice tutorial, I’ve successfully added author avatar in my thesis themes

    Reply

Leave a ReplyCancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Post navigation

Previous Previous post: How to add Breadcrumbs in thesis
Next Next post: How to add Page navigation in thesis

Currently Trending

  • How to download Specific parts of YouTube videos
    How to download Specific parts of YouTube videos
  • Windows Vista CD key
    Windows Vista CD key
  • How to retrieve my Demonoid username
    How to retrieve my Demonoid username
  • How to add Logo to Thesis theme
    How to add Logo to Thesis theme
  • How to Delete Feedbacks from JetPack Contact Form
    How to Delete Feedbacks from JetPack Contact Form
  • List Of All 255 Keyboard All Alt Key Codes
    List Of All 255 Keyboard All Alt Key Codes
  • h4x0r ( Hacker ) - Blogger Template
    h4x0r ( Hacker ) - Blogger Template

Get Latest post in your Inbox

Random Posts

Get Back Accidentally Deleted Files in Windows XP !! – Solution

July 13, 2008 By Ritesh Sanap Leave a Comment

How to Create MultiBoot Flash Drive

February 14, 2012 By Ritesh Sanap Leave a Comment

How to Find Best web hosting according to your needs

July 26, 2010 By Ritesh Sanap Leave a Comment

How to add Attribution widget in blogger

May 28, 2010 By Ritesh Sanap 3 Comments

NeoClassical Blogger Template

November 29, 2010 By Ritesh Sanap 1 Comment

WordPress

HTTP2 Server Push for W3 Total Cache Minify plugin

August 17, 2016 By Ritesh Sanap 5 Comments

How to Disable Emojis in WordPress

January 6, 2016 By Ritesh Sanap Leave a Comment

JetPack Related posts and Sharing not working with NGINX

November 10, 2015 By Ritesh Sanap Leave a Comment

Simply Pure – WordPress Theme

November 2, 2014 By Ritesh Sanap 2 Comments

Advanced What should we Write about next? – WordPress Plugin

July 28, 2014 By Ritesh Sanap Leave a Comment

How to Disable Self Pingback or TrackBack

January 16, 2014 By Ritesh Sanap Leave a Comment

BlueStrap – WordPress Theme

January 1, 2014 By Ritesh Sanap 15 Comments

How to Create Multiple Excerpts in WordPress

December 24, 2013 By Ritesh Sanap Leave a Comment

How to Disable Auto Update in WordPress

November 21, 2013 By Ritesh Sanap Leave a Comment

How to Delete Feedbacks from JetPack Contact Form

November 19, 2013 By Ritesh Sanap 9 Comments

Recent Posts

  • HTTP2 Server Push for W3 Total Cache Minify plugin
  • How to show hidden files and folders in Mac OS X
  • How to Disable Emojis in WordPress
  • Canva – Online Photo Editor
  • JetPack Related posts and Sharing not working with NGINX

Archives

Recommends

  • DigitalOcean – Cloud Hosting
  • Dropbox – Cloud Storage
  • Elegant Themes – WordPress Themes
  • LastPass – Password Manager
  • Like us on Facebook
  • Follow on Twitter
  • +1 on Google
  • Subscribe via Email
  • RSS Feed

© 2025 Best 2 Know · All Rights Reserved · We ♥ DigitalOcean