How to Create An Author Information Box For Multi-Author WordPress Blogs
Welcome to another edition of the Smashing WordPress tutorials (first, second). Enjoy this one!.
If you like this post, please consider Stumbling or bookmarking it on Delicious! 
If you run a multi author blog, you must also have an author information box beneath or at the top of posts, telling the reader about the author, right?
For example, take a look at these three examples below:
And
And
Guess…
This can be done using a plugin, but doing it using code is really easy and fun, and quick too, and that’s what this tutorial is about.
The Idea
We’re going to display the author’s picture, and a little information about them next to it. All this is going to be done using template tags (ah, how I love them!).
Let’s Start
All the stuff we put is going to be in a div, which you can position anywhere you want (preferably below the post). Here’s the code for the whole thing:
<strong>About the Author</strong>
<div>
<img src="/images/<?php the_author_ID();?>.png" alt="Author Image" id="authorpic"/>
</div>
<div id="authorbio">
<?php the_author_description();?>
</div>
</div>
Now, we start off by opening a new div, to host all the contents. Then, we add a bolded (you can change this) ‘About the Author’ piece.
The Avatar
Next comes the avatar, in a div of its own. I’ve placed my avatar in the images folder in my home directory. Now, in that folder, there will be the avatars of several different authors, right? To find the one I need, I use the the_author_ID template tag to generate the user ID of that particular author (you can find this by hovering over the user name on your Users admin page). Thus, the image’s filename looks something like 2.png (with 2 being the user ID).
For this to work, create avatars with the user IDs as the file names, (such as 1.png and 24.jpg), and drop them in the specified folder.
The Bio
Now comes the biography. We take the information in the ‘Biographical Info’ dialog box on the Edit User page of your WordPress administration. For this, we use the the_author_description template tag. This will pull the information out of the ‘Biographical Info’ dialog box, and paste it here.
And of course, you give it its own classed div, to help you style it.
What’s Next?
What’s next is for you to style your author box using CSS, which shouldn’t be hard 
Spruce it Up!
You can use a whole truckload of template tags in your author information box. For example, here are some author and post related stuff you can put in there:
- The author’s website – using the
the_author_urltemplate tag, you can put the author’s website URL in the author box. This URL is defined in the user’s profile. - The date – you can display the date of the article by using the
the_datetemplate tag
Your Thoughts
Has this tutorial helped you? We’d all love to know!
If you liked this post, please consider Stumbling or bookmarking it on Delicious!
If you liked this post, consider subscribing to the RSS feed (what's RSS?) to get updates on new blog posts.
Damn, why didn’t I think of writing this?
Now I know why you asked me for some sites with author info boxes….
Good tut, anyway. Though I don’t know if it is easy for intermediate users, I hope it is.
I guess you should point out the plugin too…for those noobs who run from hand coding like I used to do in the past…so they may have no difficulty applying this function in their blogs….you know…everyone is not as good as you are
Great post. The trick with the image names in particular was very clever!
On Pro Blog Design, the system was set up to handle loads of different guest authors. The only registered account on the blog is still mine. To get other people’s details in the author section, I use two custom fields on each post (And if the custom fields are empty, it uses my details).
It works for me because I don’t have to make every author register an account (Considering they may only be making the one post on the blog), and I edit all the posts first anyway.
)
Other alternative is use gravatar for author image by replacing img src with gravatar image of the author. Like gravatar for this comment.
i am a newbie to wordpress. this was a really interesting post.
Woo-hoo! Great tips to add another feature to the Moose’s blog.
Great site, by the way. Easy to read and easy on the eyes.
I’ll be subscribin’ now, me thinks
Great site. Thanks…
outgoing influence buddy. trust to get more from your side
Thank you for that cool tutorial. Is there any way to insert that div container into my feed?
I too would love to know how to do this in RSS feeds!
thanks for the great info!
Great info, very useful! This is exatcly what I needed!
Great work admin!