Managing Multiple Authors: Customizing the Author Bio Box

In this series on managing multiple bloggers in WordPress, I’ve covered how to showcase the authors within the WordPress Theme design, talked about how to manage author content within WordPress to help you see all the ways you can promote your authors within the design and content management system, and started showing you code and WordPress Plugins to customize the default WordPress author page, and there is more to come.

In this section, I want to look at how to feature the author’s bio on every post, and the different ways you can customize it. I’ll look at how to add the bio to the single post pageview of a WordPress Theme, and in the next of this ongoing series, feature WordPress Plugins to make the job even easier.

There is a presumption on most WordPress Themes that the blog is hosted and authored by only one author, and that their About Page will provide the information the reader needs to learn more about the brilliance behind the blog. With the proliferation of guest bloggers, more WordPress Themes are adding author bios to the single post pageview. Check your WordPress Theme to see if it includes an author bio box, or check with the author of the Theme for their recommendations on adding one.

For those daring to dig into the code of their WordPress Theme, here are some steps to help you customize your author’s bio box or section.

The Default Author Bio in WordPress

There are two ways to add an author bio in a WordPress Theme. You can do so through a Child Theme, protecting the main WordPress Theme, or editing the current Theme to include the author bio information. To do this, create the Child Theme and copy the single.php template file to the new Theme along with the stylesheet. This will be the two files you will edit with the custom code. The WordPress Codex has a good article on defining and working with a WordPress Child Theme, and if you are completely new to Child Themes, see How to Create a WordPress Child Theme (Video) and other articles on the web for creating a Child Theme.

To keep the tutorial simple, I’m going to focus on changing the single.php template file in a WordPress Theme to accommodate an author bio. Look for <?php the_content(); ?> in the template file and carefully add the example code of your choice for the author bio box below it. Take care not to disrupt other code around it.

NOTE Some WordPress Themes feature the <?php the_content(); ?> section under which the author bio usually appears in a template file such as loop.php or loop-single.php (from twenty-ten Theme), or possibly other places. Please note that I cannot help you find where to add an author bio in individual WordPress Themes. Please contact the author or check the documentation of that Theme for help, and BACKUP BACKUP BACKUP.

The following presumes you’re using Gravatar to create the author image avatar, and that the author has filled in all the appropriate details in the WordPress User Profile Panel.

We will start with adding a very simple author bio featuring the author image set to 150 pixels in size, their name, and their bio from their Profile panel.

<!-- Adding simple author box to WordPress single posts  -->
	<div class="post-author">
		<div class="post-author-image">
			<?php echo get_avatar( get_the_author_id(), 150 ); ?>
			<div>
		<h4>About <a href="<?php the_author_url(); ?>">
		<?php the_author_firstname(); ?> <?php the_author_lastname(); ?></a></h4>
		<p><?php the_author_meta('description'); ?></p>
</div>

You will need to add the author bio CSS styles as part of the post-author class, and set the post-author-image class for the avatar to align right or left and possibly add a border or some other styles to the image.

Every author wants to promote their own website. Make it easy by either reminding them to include links to their sites within their bio/description, or make it automatic by including it in the author bio.

<!-- Adding simple author box to WordPress single posts  -->
	<div class="post-author">
		<div class="post-author-image">
			<?php echo get_avatar( get_the_author_id(), 150 ); ?>
			<div>
		<h4>About <a href="<?php the_author_url(); ?>">
		<?php the_author_firstname(); ?> <?php the_author_lastname(); ?></a></h4>
		<p><?php the_author_meta('description'); ?></p>
		<p>Author Site: <?php the_author_meta('user_url'); ?></p>
</div>

Moving Beyond the Basics in the WordPress Theme’s Author Bio

The author description or bio set from within the WordPress Users > My Profile panel can include a wide variety of HTML code, creating links, adding more images, and other HTML design elements. A parenting blog might recommend their authors include the latest artwork by their children or a tech blog might enjoy a link to an author’s favorite tech toy of the moment. Encourage your authors to have fun in their author bio box if your site’s design permits. Authors can instantly update their bio on their Profile page at any time and it will change across all of their posts. (Note: If the site uses a cache Plugin, it may need to be cleared before the update is seen on older posts.)

With a few more bits of code you can further customize the author’s bio box in a WordPress Theme adding custom text, feed links, copyright notices, email subscription links, recent posts, related posts, social web connections, and much more.

Add Custom Text to the Author Bio Box

You can add any static content to the author’s bio box on every blog post on your site. You can promote your site, offer feed information, updates, or whatever you can imagine.

To promote your site a bit, why not offer some custom content to the bottom of the author’s bio in a DIV called custom-author-bio-content or something shorter. Since the author bio will appear in your feeds, it often helps to add just a little more information to remind people of the source of the content in their feed reader.

<div class="post-author">
	<div class="post-author-image">
		<?php echo get_avatar( get_the_author_id(), 150 ); ?>
		<div>
	<h4>Article by <a href="<?php the_author_url(); ?>">
	<?php the_author_firstname(); ?> <?php the_author_lastname(); ?></a></h4>
	<p><?php the_author_meta('description'); ?></p>
<div id="custom-author-bio-content">
	<p>Thank you for being here. If you would like to read more, 
	check out the rest of the articles we offer on 
	<a href="http://example.com/" title="My Site">My Site</a>.</p>
	</div>
</div>

Let’s take this a step further and add some subscription information below the author bio to encourage more calls to action steps in that area. I’ll add feed subscriptions, including a feed to to the author’s posts, the entire site, and a link to sign up for email subscription alerts.

Let’s not forget a copyright notice as well, though it’s not shown in the image example. I’ve included it in the code as an example of how to create a flexible copyright date notice.

...
<p><?php the_author_meta('description'); ?></p>
<div id="custom-author-bio-content">
	<p>Thank you for being here. If you would like to read more by 
	<?php the_author_firstname(); ?> <?php the_author_lastname(); ?>, 
	you can <a title="Subscribe to the feed for 
	<?php echo $author->display_name; ?>" href="<?php bloginfo('url'); ?>/author/<?php the_author_meta(user_nicename); ?>/feed/" />subscribe
	to their author feed</a> or subscribe to 
	<a href="<?php bloginfo('rss2_url'); ?>" title="Feed subscription for <?php bloginfo('name'); ?>">our site's feed</a>, 
	or <a href="http://example.com/email-subscription/" title="Email Subscriptions">subscribe to our email alerts</a>.</p>
	<p>Copyright &copy; 1994-<?php $the_year = date("Y"); echo $the_year; ?> 
	<?php bloginfo('url'); ?> All Rights Reserved.</p>
	</div>
...

Counting Contributor Posts

Some multiple contributor sites like to create a sense of competition between authors, or create a sense of expertise by featuring the number of posts the author has written and contributed to the site.

There are many ways to display the post count within the author bio, within a sentence, on it’s own line, or just as a note. For this example, let’s do two things. We’ll add the post count of the author in the custom-author-bio-content section and compare it to the total number of posts published on the entire blog, giving a little context to the number.

<div class="post-author">
	<div class="post-author-image">
		<?php echo get_avatar( get_the_author_id(), 150 ); ?>
		<div>
	<h4>Article by <a href="<?php the_author_url(); ?>">
		<?php the_author_firstname(); ?> <?php the_author_lastname(); ?></a></h4>
	<p><?php the_author_meta('description'); ?></p>
<div id="custom-author-bio-content">
	<p><?php the_author_firstname(); ?> <?php the_author_lastname(); ?> 
	published <?php the_author_posts(); ?> articles out of the 
	<?php echo wp_count_posts()->publish; ?> articles on this site.</p>
	</div>
</div>

Adding Recent and Related Posts to the Author Bio

I believe in not only showcasing your authors on your WordPress blog, but helping readers find more of their content easily. To help them find the most recent or related posts they’ve contributed to your blog, here are a couple examples.

To showcase the most recent five posts, add the following to your author bio on single post pageviews after the author description.

...
<p><?php the_author_meta('description'); ?></p>
<p>Want more? <?php the_author_firstname(); ?> <?php the_author_lastname(); ?> has recently published:</p>
<ul>
<?php
	$args = array( 'numberposts' => '5' );
	$recent_posts = wp_get_recent_posts( $args );
	foreach( $recent_posts as $post ){
		echo '<li><a href="' . get_permalink($post["ID"]) . '" title="Check out '.$post["post_title"].'" >' .   $post["post_title"].'</a> </li> ';
} ?>
</ul>
...

You can either add or replace the recent post list with related posts using one of the different related posts WordPress Plugins such as Yet Another Featured Posts Plugin (YAFPP), Better Related Posts, or Efficient Related Posts. For our example, let’s assume the Plugin requires related_posts() to be added to the template file to display the related posts.

...
<p><?php the_author_meta('description'); ?></p>
<p>Want more? <?php the_author_firstname(); ?> <?php the_author_lastname(); ?> has recently published:</p>
	<?php related_posts(); ?>
...

Adding the Social Web to the Author Bio

A lot of the default entries for the author information and data on the Profile Panel are out of date or limited. For example, Facebook and Twitter now rule our lives and they don’t get a mention. Nor does LinkedIn or other sites we depend upon to connect us in the social web.

To add new options, Thomas Griffin offered the following tip, which I’ve modified a bit, to add Twitter and Facebook via your Theme’s functions.php template file, and remove a couple of the older services.

<!-- BEGIN Custom User Contact Info  -->
function extra_contact_info($contactmethods) {
unset($contactmethods['yim']);
unset($contactmethods['jabber']);
	$contactmethods['facebook'] = 'Facebook';
	$contactmethods['twitter'] = 'Twitter';
return $contactmethods;
}
add_filter('user_contactmethods', 'extra_contact_info');
<!-- END Custom User Contact Info  -->

These will add Facebook and Twitter to the Profile panel and create links to them when used within the author bio in the Theme. To use these, add the following to your author bio template file code:

<div class="post-author">
	<div class="post-author-image">
		<?php echo get_avatar( get_the_author_id(), 150 ); ?>
	<div>
<h4>Article by <a href="<?php the_author_url(); ?>">
	<?php the_author_firstname(); ?> <?php the_author_lastname(); ?></a></h4>
		<p><?php the_author_meta('description'); ?></p>
	<p>Check the author out on <a href="<?php the_author_meta('facebook', $current_author->ID); ?>">Facebook</a> and
	<a href="<?php the_author_meta('twitter', $current_author->ID); ?>">Twitter</a>.</p>
</div>

Customizing the Entire Author Bio in WordPress

There are so many ways to customize the look and feel of the author’s bio in WordPress. Let’s explore some different looks and feels, including information in a list or within a paragraph.

Designing the Author Bio in a List

Some minimalist WordPress Themes work best when details are in a list rather than in paragraphs. The following is an example of how to change the look and feel of the author bio to a list form using many of the above code details including social network links.

<!-- Adding author box in list format to WordPress single posts  -->
	<div class="post-author">
		<div class="post-author-image">
			<?php echo get_avatar( get_the_author_id(), 150 ); ?>
			<div>
<ul>
	<li>Author: <a href="<?php the_author_url(); ?>">
		<?php the_author_firstname(); ?> <?php the_author_lastname(); ?></a></li>
	<li>Number of Published Posts: <?php the_author_posts(); ?></li>
	<li>Author Site: <a href="<?php the_author_meta('user_url'); ?>" title="Author Site">
		<?php the_author_meta('user_url'); ?></a></li>
	<li>Facebook: <a href="<?php the_author_meta('facebook', $current_author->ID); ?>">
		<?php the_author_firstname(); ?> <?php the_author_lastname(); ?> on Facebook</a></li>
	<li>Twitter: <a href="<?php the_author_meta('twitter', $current_author->ID); ?>">
		<?php the_author_firstname(); ?> <?php the_author_lastname(); ?> on Twitter</a></li>
	<li>Author Post Feed: <a title="Subscribe to the feed for 
		<?php echo $author->display_name; ?>" href="<?php bloginfo('url'); ?>/author/<?php the_author_meta(user_nicename); ?>/feed/" />
		Add <?php the_author_firstname(); ?> <?php the_author_lastname(); ?> to your feed reader</a></li>
	<li>Bio: <?php the_author_meta('description'); ?></li>
</ul>
</div>

It’s a clean and easy to read list of information about the author. If the author hasn’t filled in their bio on their Profile panel completely, only the information they add would be shown and the rest blank, providing a little incentive for them to fill in the blanks.

Designing the Author Bio in Paragraph Form

Some WordPress Themes tend to look better when their author bios are in complete sentences and paragraph style. Here is an example that uses the code from the previous list example combined with a list of author categories shown in Managing Multiple Authors: Customizing the WordPress Author Page with a little help to put the list into a real sentence structure from Otto of Otto on WordPress.

Using this technique, your author doesn’t even have to fill in an author description if they don’t want to as you can automatically generate a lot of information from the barest of data. In the image and example code below, I’m not using the the_author_meta('description') template tag.

<!-- Adding list of categories to author bio -->
<?php
$categories = $wpdb->get_results("
	SELECT DISTINCT(terms.term_id) as ID, terms.name, terms.slug
	FROM $wpdb->posts as posts
	LEFT JOIN $wpdb->term_relationships as relationships ON posts.ID = relationships.object_ID
	LEFT JOIN $wpdb->term_taxonomy as tax ON relationships.term_taxonomy_id = tax.term_taxonomy_id
	LEFT JOIN $wpdb->terms as terms ON tax.term_id = terms.term_id
	WHERE 1=1 AND (
		posts.post_status = 'publish' AND
		posts.post_author = '$author' AND
		tax.taxonomy = 'category' )
	ORDER BY terms.name ASC
");
?>
<!-- Author Bio in paragraph format -->
<div class="post-author">
	<div class="post-author-image">
		<?php echo get_avatar( get_the_author_id(), 150 ); ?>
	<div>
<p><a href="<?php the_author_url(); ?>">
	<?php the_author_firstname(); ?> <?php the_author_lastname(); ?></a> 
	has written <?php the_author_posts(); ?> articles on 
	<a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a>. 
	You can read more of the author's excellent topics on
	<?php foreach($categories as $category) {
		$catlinks[] = '<a href="'
		.get_category_link( $category->ID )
		.'">'.$category->name.'</a>';
		}
		echo implode(', and ',
		array(implode(', ', array_slice($catlinks,0,-1)),
		$catlinks[count($catlinks) -1]));?>. 
	You can <a title="Subscribe to the feed for 
	<?php echo $author->display_name; ?>" href="<?php bloginfo('url'); ?>/author/<?php the_author_meta(user_nicename); ?>/feed/" />
	add their posts to your feed reader</a> or 
	<a href="<?php the_author_meta('user_url'); ?>" title="Author Site">visit their site</a> 
	for more great articles and resources. 
	You can also follow the author on 
	<a href="<?php the_author_meta('facebook', $current_author->ID); ?>">Facebook</a> 
	or <a href="<?php the_author_meta('twitter', $current_author->ID); ?>">Twitter</a>.</p>
</div>

What’s Next?

I’ve shown you just a few of the many ways you can customize your author’s bio on WordPress with basic WordPress template tags and a few bits of code. In the next article in this series on Managing Multiple Bloggers in WordPress, I’ll show you some ways to use WordPress Plugins to make this design task a lot easier.

For more information on some basics for designing and customizing the author bio section of a WordPress blog, see:

• How to Add Author Bio to WordPress Without a Plugin | Evolutionary Designs
• How To Add An Author Bio To WordPress Posts | Chris Creed
• Add an Author Information Box to Your WordPress Theme – MakeTechEasier
• WordPress Custom Author Template Files
• Using Author Template Tags Outside of the WordPress Loop « Lorelle on WordPress

Article Series on Managing Multiple Authors in WordPress

• WebVisions: Managing Multiple Bloggers in WordPress
• How to Manage Multiple Bloggers on WordPress
• Managing Multiple Authors: Showcasing the Authors
• Managing Multiple Bloggers: Author Content Management on WordPress
• Managing Multiple Authors: Customizing the WordPress Author Page
• Managing Multiple Authors: Customizing the Author Bio Box
• Managing Multiple Authors: Author Lists in WordPress

---

Subscribe Via Feedburner Subscribe by Email

Copyright Lorelle VanFossen.