How To Add Author Bio Box below single post in Thesis Theme

Tutorial on How To Add Author Bio Box below single post in Thesis Theme. Ever thought of adding an author profile box below each post ? It helps to better engage with readers and sometime in improving rankings. If you are a Genuine blogger, then we recommend to add Author Bio Box.

What is Author Bio Box ?

Author Bio Box includes a brief info of the Author who has written the article. It also includes link to the author archives, which further display list of all articles written by that author. Social Profiles are also included and they helps to engage with author more easily.

Reasons to Add Author Profile Box in Thesis

There are quite many reason to add Author Profile box and the main one is “Google Rich Snippets”. After the introduction of rich snippets by Google, author image will be displayed along side the search results. You have to verify Google Plus profile by linking it to your blog and using this bio box, it can be done very easily.

Check How to Add Numbered Page Navigation in Thesis Theme

Add Author Bio Box below single post in Thesis Theme

This is a simple code and it displays an avatar, first name, last name and bio of the author who has written the post. You can modify any part of this code, based upon the requirement. Now, lets add this code to thesis theme…

• Login to WordPress Dashboard, go to Thesis > Custom File Editor.
• Open Custom_functions.php file, add below code and update it.
• You have successfully installed author bio box on thesis.

/** Add Author Bio Box To Thesis Theme */
function author_bio_box() {
if (is_single()) { ?>
<div class="postauthor">
<?php echo get_avatar( get_the_author_id() , 100 ); ?>
<h4>Article by <a href="<?php the_author_url(); ?>"><?php the_author_firstname(); ?> <?php the_author_lastname(); ?></a></h4>
<p><?php the_author_firstname(); ?> has written <strong><?php the_author_posts(); ?></strong> awesome articles for us. <br/><br/>
<?php the_author_description(); ?></p>
</div>
<?php
}}
add_action('thesis_hook_after_post_box', 'author_bio_box');

How to Change Gravatar size ?

You can change the size of author gravatar displayed in this bio box, by modifying the number highlighted in the code. (Use any positive integer).

Author box have been added to thesis by using Hooks. You can also use any other thesis hook to display author bio at appropriate position.

Recommended How to Add 4 Column Footer to Thesis Theme

Fill Name Field in your User Profile

For the perfect functioning of this code, it is necessary to fill name fields in your user profile. If you have already done this, please do ignore this step.

• Login to WordPress Dashboard, go to Users > Your Profile.
• Fill the empty fields with your First and Last Names.
• Update your Profile and everything will be fine.

Add CSS to Author Bio Box in Thesis Theme

And the final step to style the Author Bio Box by adding below CSS to custom.css file.

.postauthor {
    background: none repeat scroll 0 0 #F7F7F7;
    border: 2px dashed #DDDDDD;
    overflow: hidden;
    padding: 10px;
    width: 100%;
}
.postauthor img {
    border: 3px solid #DDDDDD;
    float: left;
    margin-right: 15px;
}
.postauthor h4 {
    color: #666666;
    font-size: 20px;
    margin-bottom: 5px;
}
.postauthor p {
    color: #515151;
    font-size: 13px;
    line-height: 20px;
    margin-bottom: 12px;
}

Change background, border etc things based on the color scheme of your theme. If you need any help in adding author bio box below single post in Thesis Theme, drop a comment and we will me more glad to help you.