When people read articles or blog posts they usually want to know a little about the person that wrote them. They often have the question: Why should I listen to you? Often, this answer can get summed up with a short bio box.

A bio box (or author box) often contains an image of the person that wrote the article or an avatar of some kind to represent the writer. The image can help make the reader feel more comfortable listening to advice or commentary from the writer. Some bio boxes may even contain videos that help the reader connect and in a sense “know” the writer on a more personal level, that might not otherwise be achieved with just an image or textual description alone.

The bio box may also contain one or more links to allow the reader to either learn more about the author or about the current article. As is the case with many article directories like eZine Articles for example, a new bio box can be created for each article allowing the writer to bring the reader into a different web site for further reading. This is a highly effective strategy for building a readership, and possibly even to make sales, on a different web site other than the one the content is published on.

Author Bio Box Samples

Often In WordPress There Is Very Little To Do To Get An Author Box In Place, The Theme Usually Adds It

When modifying the writer’s profile in WordPress, the information entered is often what gets displayed above or below each blog post by that writer. This is usually setup globally and is the same for all posts and is not setup on a post per post (or article to article) basis like is common with article directories.

The chosen theme often dictates the placement of the profile or author box, and whether it is even displayed at all. A lot of times the author image is pulled in from Gravatar.com matched by the author’s email address. Gravatar is natively supported by WordPress. The profile may also provide links to social profiles if they exist.

Mostly, the name of the author links to that author’s archives, but sometimes it isn’t linked at all. These days people are wanting to link to their Google+ profiles from each of their posts so that they can build their Google Rank or Google Authorship. For this reason, many themes and plugins will offer that ability. Other times, the web master needs to modify the theme code to add in the author link. It’s often best to use a plugin however to make it easier when there are multiple authors on the WordPress blog. But if you are creating a bio box from scratch you can work the code in there using the theme’s functions file or a custom plugin.

Note that when working towards Google Authorship and linking the author name (or Google+ icon) to the Google+ profile, be sure and append “?rel=author” (without quotes of course) to the profile URL. Also, match the author display name with the Google+ display name so Google has a clear indication of the matchup.

First Create A New Author And Modify The Profile Information

The first thing that you’ll need to do is modify an existing author’s profile or create a new one. To create a new one, in the WordPress dashboard click on Users >> Add New.

If you want the user to modify his or her own profile select the option to send them their account information by email. If you are to edit further details about the author click on Users >> All Users, then click on the Edit text link below the author account in question. Or, if it’s your own profile click on Users >> Your Profile.

The Following Is Sample Code Used To Display A Custom Author Box On Individual Posts

Below is sample code that can be used to display a custom bio box in WordPress. It can be placed in the themes functions.php file (or used in a custom plugin). Scroll past the code for an explanation of what it does.


function uniqueprefix_author_bio( $content ) {
global $post;
if ( is_single() && isset( $post->post_author ) ) {
$display_name = get_the_author_meta( 'display_name', $post->post_author );
if ( ! empty( $display_name ) )
$display_name = get_the_author_meta( 'nickname', $post->post_author );
$user_description = get_the_author_meta( 'user_description', $post->post_author );
if ( ! empty( $display_name ) )
$author_details = '

About ' . $display_name . '

';
if ( ! empty( $user_description ) )
$author_details .= '

' . nl2br( $user_description ). '

';
$content = $content . '

' . $author_details . '

';
}
return $content;
}
add_action( 'the_content', 'uniqueprefix_author_bio' );

The above code creates a very basic bio box with just the author name and description. You can also work in other profile values. For example, to display an author image based on the image used on the Gravatar web site (basically WordPress will match the author’s email address with the email address used on Gravatar to get the image), use the following code:

get_avatar( get_the_author_meta('user_email') , 90 )

Check this page in the WordPress Codex to see the different values available to you.

Now, in the sample code, at the beginning we are making sure this code will only run on single.php (individual post pages). Near the end we are appending our newly created bio box HTML to the content that WordPress is already spitting out.

And if you are curious, the nl2br PHP function is adding
tags anywhere there are “new line” characters in the description. This just makes it more friendly for display on a web page.

Oh, you can modify all instances of uniqueprefix to represent something unique to your site so that it does not conflict with existing functions, or you can leave it as is but it will be less meaningful.

Now, in the above code we are putting all of the HTML into the $author_details variable and outputting it between some fancy HTML5 footer tags. Now, if you wanted to add more content from the available profile values, you can just inject it into the $author_details variable.

For example, you may want to include the Gravatar image using the code above and float it to the left of the description. You may also want to include web site, RSS, and/or social profile links above or below the description with some attractive icons or just plain text.

Finally, the footer section (therefore the bio box) is formatted with the author_bio_section CSS class which can be modified to your liking.