How to Add an About Author Bio Box in the Post Footer in WordPress

This is a very short tutorial on how to add an About
Author Bio Box at the end of your posts just like the one at the end of this post. An author box is very important because it further connects with readers by giving a little background information on the author. I spent 2 days testing different types of plugins for this purpose but could not find any that worked correctly. So I decided to write the code and then this tutorial.

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.

Related posts:

1. How to Add an About Author Box in Thesis 1.6
2. How to Highlight Author Comments & Edit Your Reply Button in Thesis
3. Guest Post
4. How To Create A Custom Front Page In WordPress
5. Secure Your WordPress Blog Against Malicious URL Requests

Tagged as: About Author, Author Bio Box, Author Signature WordPress, php, Post Footer, tutorial, wordpress