How to : Add Author information below a post in Wordpress 2.8
Have many authors in your blog ? Learn to display the author information (bio) below his/her post or page. This simple "How to" uses API from the new version of Wordpress i.e WP 2.8
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.
- Navigate to your Wordpress theme folder.
- Open up single.php or page.php
- 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















Useful info. Did I miss point number 2?
hi Michael!
Thanks a lot. It is really an useful information.
Thanks Michael! That works!
you are welcome
oops. it didn’t show my code there, but i’m using the same url code as you did above.
hey Ty,
if you want to make the url linkable, while editing,
<a href="<?php the_author_meta("user_url"); ?>" rel="nofollow">Website</a>This should do the trick
Hey, this is great. Using though and the url is not linkable. Can it be?
Thanks!
Hello, can you please post some more information on this topic? I would like to read more.
Cool!
Thank you very much, I was looking for this!
You are welcome
Please remember to subscribe to our feeds. By the way, it is WebDevCodex.com from now on