ASP.NET : C#: VB.NET : SQL Server : Oracle : Sharepoint : PHP : SSIS : SSRS : Wordpress : Plugins : Technology News

30 Jan 11 WordPress: How to Add Author Box at Bottom of the Post

If your blog has more than one author and you wanted your reader to know little bit about your authors then you can add one small box under the post to tell about that. Adding this is very simple and could be done with the couple lines of changes in Single Post (single.php) file. But before that you may like to have a little different style for author than your blog post, to do this set some attribute in your style sheet (style.css). For your author box you can either use the existing profile fields or if you want to show author’s Twitter and Facebook account then add Twitter and Facbook fields in WordPress User’s Section page. These two things I just described is kind of optional while the main change which actually add author info is change you will do in your single post (single.php) file.

Step 1. Add new style attribute for About Author Box

#author-about {width: 540px; border:1px solid #FFD1AF; background:#FFF8AF; margin-bottom:10px; }
#author-about h2 {padding: 5px 10px;}
#author-box {margin: 10px;margin-top: 0px; font-size: 11px; text-align: justify;}
#author-box .avatar {float: left; padding: 3px; border: 1px solid #ccc; background: #fff; margin: 3px 10px 0 0}

Step 2. Add new Facebook or Twitter Profile Fields in User Section
Check my previous post to do this – How can you add new fields for user section

Step 3. Show Authors Description Below the Post
This is the main piece which actually do the actual work. There is 2 way to do this – one either you can use the code below and past directly into your single.php file right after the_content() or wp_link_pages() or the place where exactly you wanted to have it.

<!-- author display -->
<div id="author-about">
	<div id="author-box" class="section">
	$author_email = get_the_author_email();
	echo get_avatar($author_email, '50', 'wavatar');
        <h4>About <?php the_author_posts_link(); ?></h4>
	<?php the_author_description(); ?>
	<div class="clearfloat"></div>
<!--To display Author Website-->
<p><b>web site:
<a href="<?php the_author_url(); ?>"><?php the_author_url(); ?></a></b></p>

<!-- use code below, if you have added these 2 fields in step 2 otherwise not required -->
<?php if(get_the_author_meta('facebook') || get_the_author_meta('twitter')){ ?>
<!-- use this if wants to have general text when not using gender field in profile section -->
       <p>Follow Author of Post on
       <?php }
<!-- end general text description, you can replace code  in above 2 lines from the code
      given at the end of this post to display gender specific description -->

             <a rel="nofollow" href="<?php the_author_meta('twitter'); ?>" target="_blank"><b>Twitter</b></a>
       <?php }
              if(get_the_author_meta('facebook') && get_the_author_meta('twitter')){ ?>
       <?php }
              if(get_the_author_meta('facebook')){ ?>
              <a rel="nofollow" href="<?php the_author_meta('facebook'); ?>" target="_blank"><b>Facebook</b></a>.</p>
       <?php }
<!-- end code to display twitter and facebook if you used step 2 -->

    </div> <!--end author-box-->
</div> <!--end author-about -->
<!-- end display -->

Second way is copy code above, open a notepad, paste there and save it as author.php file. Then move that to the same Theme folder which you are using for your blog. Later you can simply include that author.php file in your Single Post (single.php) or may be in sidebar if it’s single user site. You will need to add following line in single post or where you want to display author box based on the code you have in author.php file -

<!-- author display -->
<?php include ('author.php'); ?>
<!-- end Author display -->

After following these 3 steps, you may need to adjust the about-author width in your style sheet depending on your theme’s single post width. Once all set it will look something like this -

One last thing, just in case if you have decided to use a field for gender and wants to change text according to that then you can use something like this -

<!-- you should check value for "M" or "m" or "male" of "Male", similarly for female -->
if(get_the_author_meta('sex') == "male"){ ?>
       <p>Follow him on
       <?php }
if(get_the_author_meta('sex') == "female"){ ?>
       <p>Follow her on
       <?php }