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.
Well, I think this is the same technique in which as multi author A List Apart uses, I have seen this style on Options theme and it was the firs time I meet it, but I couldn’t help myself understand where the image came from. I understood it now.
Thanks, you are nice teacher
A List Apart probably uses something like this.
The current version of the Options theme has pretty much this same script, except it’s much more bloated, and you have to explicitly tell it to check for a gravatar. The next release will be nicer and give users more options to play around with.
my desire – a way (plugin, probably) to choose at random an about the author description or fact from a set of such user-supplied items – this would allow my authors to have a variety of different/stupid/hopefully-funny things appear attached to their articles
As always, Justin, your work is great and admired most. Beside this new Gravatar, are you doing new themes? Looking forward on your work.
catsandbeer
Sounds like a cool idea. If I ever get the time, I might have to write that plugin.
David
I’ve got about five or six new themes in the works. Even though I haven’t announced it, I’ll be releasing them all simultaneously. This is because of a new WordPress project I’ll be unveiling later this month. So, be on the lookout for that.
Justin, I am truly impressed with all the information and support you have given in this blog. Being still a WP novice, I find that you have given lots of valuable information to help me understand how to tweak WP…
Cheers…
kp
Well, keep reading. I’m sure there’s more to come. Plus, I’ve still got to finish up this series on using gravatars.
doesn’t seems to be working for me. When I click on the link, it says the path is not found. What gives?
i mean ?php the_author_posts_link(); ?
Hi Justin,
I just discovered your options theme. It’s incredible! Thanks so much for offering it to us!
I’ve been tweeking all day. Still have more to do…
For right now, I’m stuck on this gravatar thing. Which folder exactly am I supposed to upload my pic so it will appear next to about? i changed the code and now a black box appears with my username in it. I didn’t know where to stick the css code… not in the single.php right?
While we’re at it. I added a twitter feed and used a table to put the feed next to the twitter bird image. But, the image keeps displaying a border. How do I get rid of that?
Thanks so much!!
Jennyhow
That’s the default WordPress tag for that. You might be outside the loop or have something else going on with your install. If you take this over to the forums and post your code, I’ll try to help you implement it.
giramonda
Please ask theme support questions in the forums.
Cheers mate well covered
This “author bio” code is great and easy to implement. Thanks. If I may request, can you do a simple intro on how you achieve your front page layout? A normal post followed by using custom images and excerpt. This will be very helpful. Thanks.
awesome! thanks a lot
Thank you so much for this information! I’m still fiddling around with a few things, but it’s been very helpful to me.
Great tute. Got it working on my site. Just need to tweak the CSS now. Cheers Justin.
This is probably a long shot, but is there anyway to create a more link after “x” amount of words. I have an author who has an enormous profile and I would like to keep the about the author from taking up too much space.
thank you.
Cheers mate,
really nice guide. I have some posts which are co-authored. I use the Co-Authors Plus plugin to show both names. It would be nice to show bio and gravatar as well. I’ve got an author box under my posts but i cannot manage to show both authors images and description. Any help?
Sample Post: http://www.meridianionline.org/2010/12/10/chiacchiere-alessandro-colombo/