This “how to” will teach you to show author information of a particular post/page below that post/page in your Wordpress blog. It is very useful when your blog has not one but many authors.

A live example of this “how to” is this particular post itself. As you have noticed, the author who has written this post, the information is shown below. Its a very simple procedure.

Step 1 : To display Author’s picture

First install a plugin called “Author Image“. This will allow you and your authors to upload a picture/avatar within your profile page inside the Wordpress Administration.

The plugin allows you to display the avatar on any post/page by just including a simple function i.e

<?php if(function_exists(the_author_image)) the_author_image(); ?>[/code]
<h3>Step 2 : To Display the Author Meta Data (Author Information)</h3>
Wordpress has a function which can be used to display author information. The function is [code lang="php"]
//function to display author meta

<?php the_author_meta( $field ); ?>
/*
$field = any of the following will print its result
* user_login
* user_pass
* user_nicename
* user_email - We will be using this
* user_url - We will be using this
* user_registered
* user_activation_key
* user_status
* display_name
* nickname
* first_name
* last_name
* description
* jabber
* aim
* yim
* user_level
* user_firstname - We will be using this
* user_lastname - We will be using this
* user_description - We will be using this
*/

Step 3 : Put all together

First lets put together how we want the author information to be displayed. I wanted a very simple layout which will look something like this.

The HTML and CSS would be

<div style="overflow:hidden"> <div style="float:left; margin-right:1em">
<img src="mypic.jpg" width="150" height="150" alt="My Picture" />
</div>
<h1>Micheal B.</h1>
<p>Hello my name is bla bla bla.... my description
My Website = http://www.visionmasterdesigns.com
My Email = micheal@visionmasterdesigns.com
</p>
</div>

Now all you need to do is substitute the above variable code with Wordpress code keeping the structure intact i.e

<div style="overflow:hidden">
<div style="float:left; margin-right:1em">
<?php if(function_exists(the_author_image)) the_author_image(); ?></div>
<h1>About the Author - <?php the_author_meta( 'user_firstname' ); ?></h1>
My Website = <?php the_author_meta( 'user_url' ); ?>
My Email = <?php the_author_meta( 'user_email' ); ?>
</div>

See, its pretty simple . Now lets add the above piece of code.

1. Navigate to your Wordpress theme folder.
2. Open up single.php or page.php
3. Just add the code we created to display author information where ever you want it to show up inside the single.php or page.php. An example excerpt from my single.php where the author information will be shown below the post content.

   //shows the content
   
   //shows page numbers if any
   
   //shows the AUTHOR INFORMATION
   <div style="overflow:hidden">
   <div style="float:left; margin-right:1em">
   <?php if(function_exists(the_author_image)) the_author_image(); ?></div>
   <h1>About the Author - <?php the_author_meta( 'user_firstname' ); ?></h1>
   My Website = <?php the_author_meta( 'user_url' ); ?>
   My Email = <?php the_author_meta( 'user_email' ); ?></div>
   

Conclusion

Voila, you have successfully modded your blog to show individual Author Information below the post, just like this post.
I am open to queries, so don`t hesitate, post your comments

About the Author

Michael is a freelance web developer. Fluent with PHP, Ruby on Rails, AJAX, CSS and HTML. Runs his own Web Designing Firm viz Vision Master Designs, who deal with customized solutions for business needs, blog design and development. Currently selected with this year's Google Summer of Code, working with Wordpres. Follow Michael on Twitter

Enjoyed the Article ?