To add an author biog box after your post you will need to add some new structure into the single.php file and some CSS into your style.css file. Throughout what’s written here I’ll assume you’re using a child theme and using the Twenty Eleven theme for your WordPress site. If you’re using a different WordPress theme the main things will be the same but you will probably have to tweak the CSS a little – particularly around any element that has “float” or “clear” applied and you might also have to use or exclude “!important” declarations on elements. The best approach is just use this as is, see how it fits with your theme then start making changes 1 at a time until you get what you’re after.

Here goes:

Adjust your “single.php” file

1. Download your single.php file from the default twentyeleven theme folder on your server to make edits locally

2. If you’re running a web server on your local PC with a WordPress instal you will be able to test your changes locally and just upload to your live server at the end when you’re finished (e.g. WAMP)

3. Open your downloaded single.php file and add the following code snippet:

<?php get_template_part( 'content', 'single' ); ?> // *** Original code in the template as a position marker ***

<!-- ****************************** -->
     <div id="authorbox"> <!--author box added by me-->
          <div class="authortext">
               <?php if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '80' ); }?>
               <h4>About <?php the_author_posts_link(); ?></h4>
               <p><?php the_author_description(); ?></p>
          </div>
      </div>
<!-- ****************************** -->	                    

<?php comments_template( '', true ); ?>           // *** Original code in the template as a position marker ***

4. Test this code insertion to make sure it’s appearing in a location on your page that you’re happy with. don’t worry about how it looks, you’ll be styling the content next. the mission for now is to make sure it appears in a place you’re happy with. When I did this I was using the default Twenty Eleven theme so the location above is relevant for that template. I placed my code after the “get_template_part” and before the “comments_template” tag. You can change the location to suit your own needs but most templates are similar at this level.

Style your new author biog box

5. Now that you have the author biog box where you want it it’s time to add some style to it. You can make this as simple or elaborate as you want to.

6. Add the following CSS rules to your theme stylesheet (if you’re using a child theme this will be the stylesheet in your child theme folder):

/*Style author box*/
#authorbox {background:#fcf8d7; border:1px solid #e2dede; max-width:620px; margin:0 auto; margin-bottom:20px; overflow:hidden; padding:10px;}
#authorbox h4 {font-size:16px; color:#FFF; margin:0; padding:0; clear:inherit !important;}
.authortext {padding-left:10px;}
#authorbox img {margin-right:10px; padding:0; float:left; border:5px solid #e2dede;}
#authorbox p {color: #FFF; margin:0; padding:0px; font-size:12px;}
#authorbox h4 > a {text-decoration:none; color: #FFF;}
#authorbox a {font-weight:bold;}
#authorbox {-moz-border-radius: 9px; border-radius: 9px;}
#authorbox {background: #03f;	background: -moz-linear-gradient( #03F, #036);	background: -o-linear-gradient(#0f0f0f, #2B2B2B); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0f0f0f), to(#2B2B2B)); /* Older webkit syntax */ background: -webkit-linear-gradient(#0f0f0f, #2B2B2B);}
div.authortext p a {color: #FF3;}

7. I mentioned in the intro that some of the CSS styling might have to change depending on the theme you’re using. On line 3 of the CSS snippet you will see a “clear” instruction. that’s one that is likely to need modification in your theme. I had to use it because of previous styling rules applied to the h4 tag in the Twenty Eleven theme (so I had to adjust those rules for this specific addition while leaving them in tact for the rest of the site). There might be similar little quirks in the theme you’re using. Just play around with the CSS to get what you want. I’ve used “max-width” to get a nice width on the biog box when the browser window is full size, when the browser window is reduced the biog box shrinks dynamically. This setting looks OK on iphones, ipads, tablets etc.

8. Change the colours, border radius, link colours etc to suite your needs. Strip the CSS right back to have a basic minimalist author box or make it quite elaborate with background images etc.

9. That’s it. You should now have an author biog box appearing after each post on your site in a location of your choice looking the way you want it to look.

Notes:

• The code used here assumes the post author has a gravitar set up and that they have completed the user biog section in their user setup with something sensible. If they haven’t this will be a bit of a waste of time
• You could replace the php “get_avatar” call with a simple image insert if you only have 1 author for your site and you don’t want to set up a gravatar
• The biog box will only appear at the end of the full post – not in excerpts or in the post preview (on the front page if you’re using the Twenty eleven theme). that’s because you added the code to the single.php template file. You could experiment with other files/locations if you wanted the information to display on other pages etc
• You can see the results of this in action if you open any of the posts on this site.
• You might find this a bit of overkill and repetition if you are the only poster on your site. I’d probably agree with that. I use this site to experiment with WordPress and learn how it works so I’m less concerned with that sort of consideration and more interested in how to achieve a particular result. If you’re running some sort of commercial site or more professional blog then you might be right in thinking twice about implementing this sort of thing.

NOTE: In the Twenty eleven theme there’s already an author block included when a post is made in a multi-user site and the author has entered their biog data. You will find the code for this in the Twenty eleven theme file “content.single.php”. the div involved is “author-info” and there are vaious classesand default styling rules in the default style.css file. Instead of adding new HTML etc to your single.php file as I’ve done in this post you could just re-style the default div. (I found this out after having done the work because this feature didn’t appear correctly – mainly I suspect because only a single publishing author had been sued in my blog until I made a mistake and published using a different user).