How to Create An Author Information Box For Multi-Author WordPress Blogs

Yo there! If you are new here, you may want to subscribe to my RSS feed, or through email, for more tips on better and effective blogging!

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

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:

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_url template 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_date template 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.