This will require that you access 2 of your template files, however, very little coding is required; just copying and pasting, unless you want to make further customization.

Let’s get started.

Step 1 – Code to call the Author Biography Info

Copy the code below to your single.php (Single Post) file, which is found in WordPress by accessing your Appearance tab then select Editor. Search for the <?php the_content(); ?> line of code, press enter to give some space then copy and paste the code below that line, then save:

<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> awesome article(s) for us. <br/><br/><?php the_author_description(); ?></p>
</div>

Step 2 – CSS Files

Copy the CSS code below to your style.css or custom.css file. This will control the background color, width and text alignment. You may change the color schemes as needed to fit your theme.

/* Author's Bio Box */
.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; }

Step 3 – Author’s Bio

Add the author’s bio information in the About Yourself section in the WordPress dashboard. Please note that if you wish to add links to the author’s bio, they should be entered using the <a href=”http://www.yourdomain.com”> Your Site’s Name </a> format.

That’s it! I hope this tutorial was simple enough and very helpful.

Questions / Suggestions

Please leave a comment and let me know if this works for you, if its simple enough or if you have an idea for improving the code. There is always room for improvement.