With the increasing number of people writing articles on web, blogs are working hard to present them in best way. Being a blogger, I always get excited when I see my name published on web, for instance, a short bio explaining about you after each article you publish. By Blogs presenting its Author, I mean that a self-respect, delights a blogger and make them more enthusiastic towards their blogging. This is can be done, by adding an image of the author add adding a short bio about author, like you can see in the screenshot below.
Author Bio on TheCreatology
In this article we will learn to add author bio in Thesis Theme. As we all know about the DIY thesis theme and its SEO optimization and design customizations. Thesis being a simple wordpress theme, is incomplete with few options like Author Bio, share buttons, etc. But since thesis theme does allows customization, so we will add author bio after post on wordpress blog. But before we proceed with this article I recommend you to safely upgrade thesis theme.
Author BIO after post in Thesis
As we are know that Thesis customization is done using thesis hooks which are overriding functions. To show author bio in single post, copy-paste the code snippet in the custom_functions.php.
Make sure you take full backup of custom_functions.php file using FTP before modifying it.
//Author: AkyJoe
//Email: akyjoe@gmail.com
function add_author_bio() {
if (is_single())
{ ?>
<div class="postauthor">
<?php echo get_avatar( get_the_author_id() , 120 ); ?>
<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> articles for us. <br/><br/><?php the_author_description(); ?></p>
</div>
<?php }
}
add_action('thesis_hook_after_post_box', 'add_author_bio');
- Now that we have added the author bio code, next we will have to style author bio by CSS code.
- Navigate to Thesis > Custom File Editor, select custom.css file and copy paste the below code snippet very carefully in Custom.CSS file.
.postauthor {background: #F5F5F5; border-top: 1px solid #e1e1e0; border-bottom: 1px solid #e1e1e0; overflow: hidden; padding: 1.5em; }
.postauthor img { border: 5px solid #e2dede; float: left; margin-right: 1.5em; }
.postauthor h4 { color: #666; font-size: 2em; margin-bottom: 5px; }
.postauthor p { color: #515151; font-size: 13px; margin-bottom: 12px; }
- Above code will style author bio for single post and you can change color of box background and font color accordingly in the above code to match the theme.
- Now, that we have added the code, you can refresh the website and see the author bio after post detailed page.
I’m sure by adding author bio in single post, will increase blog rating and a check plus to boost your author’s enthusiasm. Do let us know the after effects of adding Author Bio in your blog, by a simple feedback.
If you have any query or further assistance is required, then you can post comment below.