Add an author’s bio to WordPress posts

For one of my clients, they’ve requested author level permissions for all the members in their organization. This could become a huge headache — very quickly — or if managed correctly, a highly effective communication tool.

With every member writing and commenting, it can become hard to know who’s writing what, or what context they’re coming from, so I wanted to add a brief author’s bio to the end of each post.

I wanted something that was easy for everyone to use and update without having to hard code the information somewhere. And after a quick Google search I realized you can pull a user’s/author’s information straight off of their User Profile page in WordPress.

For this site in particular, I’m also using the Register Plus plugin to add additional fields to the user’s profile information. It not only helps when approving members but will also help add additional context as the users write multiple posts on the site.

Let’s take a look at the code to begin with…

<div id="writer">
<?php echo get_avatar( get_the_author_meta('user_email'), '80', '' ); ?></a>
<p><strong><i>Article posted by:</i> <?php the_author_meta('display_name'); ?></strong><br/>
<strong>College/Association:</strong> <?php the_author_meta('college_or_law_firm'); ?><br/>
<strong>Twitter:</strong> <a href="http://www.twitter.com/<?php the_author_meta('twitter_screen_name'); ?>" target="_blank"><?php the_author_meta('twitter_screen_name'); ?></a><br/>
<strong>Website:</strong> <a href="<?php the_author_meta('user_url'); ?>" target="_blank"><?php the_author_meta('user_url'); ?></a><br />
<strong>Bio:</strong> <?php the_author_meta('description'); ?><br/>
<a href="mailto:<?php the_author_meta('user_email'); ?>">Email the author</a> | See all posts by <?php the_author_posts_link(); ?> </p>
</div>

The key database query here is “the_author_meta”. As you can see I used it throughout this short application.

We’re essentially telling WordPress to look at the author’s data and then display the information from the field we mention, in between the parenthesis.

i.e.

<?php the_author_meta('user_name'); ?>

So let’s break it down…

You’ll want to add this on your single.php file, after “the loop” and probably before the comments begin.

I’ve wrapped my bio with the DIV ID of “writer.”

Next we add a call for the gravatar.

<?php echo get_avatar( get_the_author_meta('user_email'), '80', '' ); ?></a>

This will pull the image from the Gravatar site that’s associated with the author’s e-mail address.

Next we start pulling the bio information.

Here’s the author’s name:

<p><strong><i>Article posted by:</i> <?php the_author_meta('display_name'); ?></strong><br/>

Next, their college/association and their Twitter user name (these are fields I added with the Register Plus plugin):

<strong>College/Association:</strong> <?php the_author_meta('college_or_law_firm'); ?><br/>
<strong>Twitter:</strong> <a href="http://www.twitter.com/<?php the_author_meta('twitter_screen_name'); ?>" target="_blank"><?php the_author_meta('twitter_screen_name'); ?></a><br/>

Next comes the author’s website:

<strong>Website:</strong> <a href="<?php the_author_meta('user_url'); ?>" target="_blank"><?php the_author_meta('user_url'); ?></a><br />

And finally their actual bio – written by them – and like all the other information, updatable whenever they choose:

<strong>Bio:</strong> <?php the_author_meta('description'); ?><br/>

But we still have one more line of text left. This one may be a bit trickier if you’re not familiar with PHP. But we’re going to link to the author’s email without displaying it. We’re also going to provide a link to all the posts by that author.

So here’s the code:

<a href="mailto:<?php the_author_meta('user_email'); ?>">Email the author</a> | See all posts by <?php the_author_posts_link(); ?> </p>

What we did was simply build a basic mailto: link but instead of hard coding an email address, we’ve asked WordPress to insert the author’s email address as part of the link.

And last of all, we’ve thrown in a slightly different query, “the_author_posts_link” which will pull up a list of all the articles written by that author.

Of course… don’t forget to close out your DIV! After that we’re all done! Now on to the styling.

There are a number of other strings you can use with “the_author_meta” tag. Here’s a few built into WordPress right out of the box.

• user_login
• user_pass
• user_nicename
• user_email
• user_url
• user_registered
• user_activation_key
• user_status
• display_name
• nickname
• first_name
• last_name
• description
• jabber
• aim
• yim
• user_level
• user_firstname
• user_lastname
• user_description
• rich_editing
• comment_shortcuts
• admin_color
• plugins_per_page
• plugins_last_view
• ID

For more info what you can do with the “the_author_meta” tag, check out the WordPress Codex.

The styling is simple CSS and can be pasted into your CSS Stylesheet. I’ll share the code that I used with you and let you customize it however you want.

Enjoy!

CSS code

#writer {
background:#eef5e1;
margin:25px 0 25px 0;
padding:12px;
overflow: hidden;
}

#writer img.avatar avatar-80 photo {
padding:1px;
border:1px solid #7da939;
float:left;
width:80px;
}

#writer span {
display:block;
padding-top:4px;
border-top:1px solid #cbd8b4;
margin-top:12px;
}

#writer p {
margin:0;
width:482px;
float:right;
}

How are you putting this idea into practice? How do you think you might use something like this in the future?