We’ve learned how to add an author bio to single posts and revamp our comments with gravatars. Now, it’s time to take this one step farther.

We’re going to create a template page for all of our authors.

This can be useful if you have multiple authors on your site and want to have a page that lists all of them. It’ll let users get to know each author a little before diving into their posts.

Note to my theme users: Of course, all of this stuff is being built right into the development versions of my themes. So, you can look forward to some of this stuff being added in future updates.

Here are the steps required in doing this:

1. Give your authors some biographical information from your WordPress dashboard.
2. Create a template page to display each author.
3. Write a new Page and save it with your new template.

Oh, and you might want to get a gravatar if you don’t have one.

Setting up your authors biographical information

Well, there’s no use in having an authors page without showing some biographical information along with each author.

Log into your WordPress dashboard and click on the “Users” link. From there, you can select any user you want to add information for. Scroll down to the bottom of the screen, and you’ll see a section named “Biographical Info.” Just type whatever you want about yourself or a particular author.

Click “Update Profile” to save this new information. You’ll probably want each author of your blog to write a short blurb that suits them.

Creating the authors template

The first thing we need to do is name our template (very important!) and get the header file. I’ve named this template “Authors” for simplicity.

<?php /*
Template Name: Authors
*/ ?>

<?php get_header(); ?>

Then, we need to set up a basic loop to show the title and content of the page. This way, you can still write a little describing the page later.

<?php if(have_posts()) : while(have_posts()) : the_post(); ?>

	<div class="post">
		<h2 class="section-header">
			<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
		</h2>
		<div class="entry">
			<?php the_content(); ?>
		</div>
	</div>

<?php endwhile; endif; ?>

Now, we can move on to the backbone of this template page, which will show all of our author profiles.

Before we display any information, we need to actually grab the information from the database. I tried to comment this well enough for everyone to reasonably understand what’s going on.

<?php

// Get the authors from the database ordered by user nicename
	global $wpdb;
	$query = "SELECT ID, user_nicename from $wpdb->users ORDER BY user_nicename";
	$author_ids = $wpdb->get_results($query);

// Loop through each author
	foreach($author_ids as $author) :

	// Get user data
		$curauth = get_userdata($author->ID);

	// If user level is above 0 or login name is "admin", display profile
		if($curauth->user_level > 0 || $curauth->user_login == 'admin') :

		// Get link to author page
			$user_link = get_author_posts_url($curauth->ID);

		// Set default avatar (values = default, wavatar, identicon, monsterid)
			$avatar = 'wavatar';
?>

Now for the actual display of the author profiles. We’ll just show each author’s gravatar, display name, and description with the gravatar and display name linked to the author’s archive page.

I’m treating each profile as a post, so I won’t have to add additional CSS to my stylesheet to get them to display properly.

<div class="post">

	<a href="<?php echo $user_link; ?>" title="<?php echo $curauth->display_name; ?>">
		<?php echo get_avatar($curauth->user_email, '96', $avatar); ?>
	</a>

	<h3 class="post-title">
		<a href="<?php echo $user_link; ?>" title="<?php echo $curauth->display_name; ?>"><?php echo $curauth->display_name; ?></a>
	</h3>

	<p>
		<?php echo $curauth->description; ?>
	</p>

</div>

After that, we just need to close off everything we’ve opened.

		<?php endif; ?>

	<?php endforeach; ?>

<?php get_footer(); ?>

Just save this file as “authors.php” and drop it in the folder of the theme you’re currently using. You have to save this before moving on to the next step.

Writing our authors page

Once the above is done, all we have to do is create a new page. We go back into our WordPress dashboard and click on “Write > Page” to do this.

Give your new page a title; something like “Authors” might work. Maybe write a few sentences describing what this page is for.

For the most important part (you can’t forget this), find the section titled “Page Template.” There’ll be a drop-down list of page templates to choose from. Select the “Authors” template.

Once that’s done, you can publish your new page and view it on the Web.

Other things you can display

There are a few other things you can display as well. For example, you might want to give a link back to the author’s personal website or show their email. From the author templates page in the WordPress Codex, there’s a list of things you can show (I’m sure they don’t mind me borrowing them for this post).

These things are all configurable from the user profile edit page. Just make sure you use them after the line:

$curauth = get_userdata($author);

from the above code.

$curauth->aim;
$curauth->description;
$curauth->display_name;
$curauth->first_name;
$curauth->ID;
$curauth->jabber;
$curauth->last_name;
$curauth->nickname;
$curauth->user_email;
$curauth->user_login;
$curauth->user_nicename;
$curauth->user_registered;
$curauth->user_url;
$curauth->yim;

Go ahead and create your authors template

This should be a mandatory page for multi-author blogs. It will let your users get to know each author a little better.

As mentioned earlier, I will be incorporating this template into my themes, so if you’re using one of them, look forward to this feature in the next update.

If you need help implementing this, just stop by the support forums because it’s much easier to post code there.

We’ve learned how to spruce up our comments sections a bit with the first part of this series. Now, we’ll cover an about the author section for single posts.

I think this will mostly be useful for blogs and sites with multiple authors because you might want to tell more about who is writing the post.

The “About the Author” section is generally a short blurb about the author of the post that you’ll see at the end of posts of multi-author blogs. This is a way to show a little bit of the personality of the writer and connect with readers more.

Of course, I’m assuming that you either have a gravatar or know what one is.

Here’s what we’ll cover

First, I’ll show you how to put together a very basic “About the Author” section on your single posts using some of the same techniques from the first tutorial.

Then, I’ll show you some extra things you can do for personal gravatars that are unique to your site.

Writing your about section

The first thing you need to do (aside from getting a gravatar) is writing your about section.

In your WordPress dashboard, click on the link that says “Users.” You’ll see a list of all the users for your blog. You can either click “Your Profile” at the top or find a specific user from the list that you want to edit. On the next screen, scroll down the page and look for a section titled “Biographical Info.” This is where you’ll write your short blurb.

Once that’s done, click “Update Profile.”

The basic “About the Author” section

Now, you need to open the file single.php in your current theme folder. All themes are a bit different, so I can’t tell you exactly where to put it, but it should be after your post content and before comments_template();

Here’s the easiest code possible you could put in that area:

<div id="author-box" class="section">
	<h3 class="section-header"><?php _e('About the author'); ?></h3>
<?php
	$author_email = get_the_author_email();
	echo get_avatar($author_email, '80', 'wavatar');
?>
	<h4><?php the_author_posts_link(); ?></h4>
	<?php the_author_description(); ?>
</div>

You can change the word “wavatar” to default, identicon, or monsterid. See the gravatar blog post to read about these options. I just like wavatars the best.

Now, if the author of the blog post has a gravatar, then their personal gravatar will appear. If not, they’ll get a funny looking character.

Special avatars for authors without gravatars

Maybe you don’t want to show any of the default gravatar icons for authors without gravatars. So, we’ll just give them personal avatars for your site.

You’d need to upload an image with the author’s user login name to a folder called “images” in your theme. For example, if you had a user with a login name of “mohawk,” you’d give him an image of mohawk.jpg. Of course, you could alter these things to suit your needs.

This only requires a couple extra lines of code and a small change:

<div id="author-box" class="section">
	<h3 class="section-header"><?php _e('About the author'); ?></h3>
<?php
	$author_email = get_the_author_email();
	$author_login = get_the_author_login();
	$avatar = get_bloginfo(stylesheet_directory) . '/images/' . $author_login . '.jpg';
	echo get_avatar($author_email, '80', $avatar);
?>
	<h4><?php the_author_posts_link(); ?></h4>
	<?php the_author_description(); ?>
</div>

If this doesn’t seem to work correctly, try using get_the_author_id(); instead of get_the_author_login();. Then, you’d need to change the names of the images to the IDs of your authors.

Giving everyone personal avatars

Let’s presuppose that you don’t want to use the Gravatar service for this at all. You might still want to add user avatars for your site and host your own images. Using the techique from the last section, placing individual images for each author in the “images” folder, here’s how you’d do that.

<div id="author-box" class="section">
	<h3 class="section-header"><?php _e('About the author'); ?></h3>
<?php
	$author_login = get_the_author_login();
	$avatar = get_bloginfo(stylesheet_directory) . '/images/' . $author_login . '.jpg';
?>
	<img src="<?php echo $avatar; ?>" alt="<?php echo $author_login; ?>" class="avatar" />
	<h4><?php the_author_posts_link(); ?></h4>
	<?php the_author_description(); ?>
</div>

Styling this thing

As with any theme, there’ll be major differences in how things are displayed. I’ve given you an ID of “author-box” to work with. Here’s how one might style it. You’ll have to adjust these values to for your theme.

#author-box {
	width: 568px;
	padding: 10px;
	background: #f7f7f7;
	border: 1px solid #eee;
	}
#author-box .avatar {
	float: left;
	width: 80px;
	height: 80px;
	}

More to come!

Now, we have two different techniques that we can use our gravatars for. Is there more we can do? Yes, there is. I’ve got at least two, possibly three, more tutorials in mind for this series.

So, stay tuned. There’s more to come.

If you need help with this and need to post large blocks of code, try to use the forums as it’s much easier to post and read code there.

I’ve been playing around quite a bit with the gravatar feature for WordPress since it now comes built in. I’ve learned a few things, so I figured I’d share them with you.

From this point forward, I will assume you know what a gravatar is. WordPress 2.5 comes with built-in gravatar support. If you’re using an earlier version of WordPress, you’ll need to modify the code in this tutorial and use the gravatar plugin.

For the first part of this series I’ll go through some techniques you could use to spruce up your comments section. Some of you may notice that there are four distinct types of avatars used in my comments section:

1. My avatar: My personal avatar I can change from my site.
2. Gravatars: User gravatars if a user has one set up.
3. Wavatars / Indenticons / MonsterIDs: A gravatar that is used if a commenter doesn’t have a gravatar.
4. Trackback / Pingback avatar: The avatar I use for trackbacks and pingbacks, which help separate them from normal comments.

Setting up our comments section

The first thing you want to do is find your normal comment section in your theme’s comments.php file, which should begin something like this:

<?php
echo '<ol class="commentlist">';

// Alternate comment classes (bg colors)
	$odd_comment = 'alt';

foreach ($comments as $comment) :

For the next section, we need to set up a few variables that we’ll use later, which are the comment author’s URL, the type of comment (comment, trackback, or pingback), and include a funny-looking default avatar, which I’ve set to “wavatar.”

According to the Gravatar blog, there are four settings you can change your default gravatar to, which are default, identicon, monsterid, and wavatar. I’ve chosen wavatars because I think they’re a bit more fun.

// Set some variables that we'll use
	$commenter_url = $comment->comment_author_url;
	$comment_type = get_comment_type();
	$avatar = 'wavatar';

Now, we need to show those comments.

// Comments
	echo "<li class='$odd_comment'>";
	// Open commenter link if it exists
		if($commenter_url == true) {
			echo '<a href="'.$commenter_url.'" rel="nofollow" title="'; comment_author(); echo '">';
		}

Here’s the part where we get a little crazy with our gravatars.

We want to set up a default avatar just for ourselves that we can change on our on site. This allows us to use our own avatar on our sites but our gravatar on other people’s sites. Assuming you don’t separate trackbacks and pingbacks from the normal flow of comments, you can also give them a special avatar to distinguish them from the crowd. If the comment is not from you, a trackback, or a pingback, then it displays normal gravatars.

You’ll need to change the email address and image paths in this part of the code to suit your needs.

	// Personal avatar
		if($comment->comment_author_email == "averagejoe@mysite.com") :
			echo "<img src='"; echo "/wp-content/uploads/avatar.jpg' alt='Your Name' class='avatar' />";
	// Trackback / pingback avatar
		elseif($comment_type == 'trackback' || $comment_type == 'pingback') :
			echo "<img src='/wp-content/uploads/trackback.jpg' alt='Trackback/Pingback' class='avatar' />";
	// Everyone else's gravatar
		elseif($comment_type == 'comment') :
			echo get_avatar($comment->comment_author_email, '80', $avatar);
		endif;

Now, we just need to close off the open link that wraps around the gravatar and show the rest of the normal comment section.

	// Close commenter link if it is open
		if($commenter_url == true) echo '</a>';

	// Meta data
		echo "\n<div class='comment-meta-data'>\n<span class='comment-author'>";
			comment_author_link();
		echo '</span> on ';
		if($comment->comment_approved == '0') :
			echo "<em>Your comment is awaiting moderation.</em>";
		endif;
		echo "<span class='time'>
			<a href='#comment-"; comment_ID(); echo "' title=''>"; comment_date('M jS, Y'); echo "</a>";
			echo " at "; comment_time();
		echo "</span>"; edit_comment_link('Edit',' <span class="edit">','</span> ');
		echo "\n</div>";
	// Comment text
		echo "\n<div class='comment-text'>\n";
			comment_text();
		echo "\n</div>\n";
	echo "</li>\n";

// Change comment class
	if('alt' == $odd_comment) $odd_comment = 'odd';
	else $odd_comment = 'alt';

// End comment list
endforeach;
echo "</ol>\n";
?>

Styling your comments section

I can’t write a one-size-fits all tutorial on this because everyone’s comment sections are styled differently. This should get you started though. Gravatars are given a class of avatar.

#comments-template .avatar {
	float: left;
	width: 40px;
	height: 40px;
	margin: 0 15px 10px 10px;
	padding: 2px;
	background: #fff;
	border: 1px solid #ccc;
	}

If you noticed above that I set the default avatar to 80px in the earlier code, that’s so that I have a lot of styling options left open later with CSS. You can change the width and height from your stylesheet, which makes much more sense.

Do more with this

On my blog, I’m also using author comment highlighting, which is bit beyond the scope of this tutorial, but you can do the same. You can also separate trackbacks and pingbacks entirely or some other crazy thing that we don’t know about yet.

The whole point is to have fun with gravatars. Let your readers show off a bit of themselves on your blog. Get to know them a little better.

The code above is modified version of what I’m using on this blog, so if there are any typos, feel free to let me know. I’ll update them ASAP.

Stay tuned for the rest of this tutorial series. We’re not going to stop at the comments section.

If you need help setting this up please stop by the forums here at my site. It is much easier to post and read code there than in the comments section of the blog.