Create a WordPress Author Bio with Custom Social Links

• Tweet

The WordPress platform comes with all the user options to build a small bio on each author but it doesn’t provide the functionality to include it by default. Instead, it is up to those that build themes to incorporate these features. They often don’t.

This post will show you how to include a small author bio under each post with links to various social platforms. We’ll also render a gravatar image based on the registered email address of the user. In the download below you’ll also find a standalone WordPress plugin.

WordPress Contact Options

The “contact options” are defined in a function called user_contactmethods in wp-includes/register.php. As of version 2.9 of WP, we’ve had a had an API filter to change these fields.

WordPress still includes AIM, Yahoo IM and Google Talk as the default social options (in the user admin menu). You’re most likely going to want to direct people to the bigger social networks from your author bio; these would normally include Twitter, Facebook and Google Plus.

Old Social Links

Prior to the WP core change of 2.9, you could have always used the existing fields for anything at all and called them from within your theme as whatever you wanted to. Having the changes in the WP back-end interface simply makes social links easier to manage.

New Social Links

Add/Remove Social Links

The first thing we’ll need to do is hook into the WordPress core and remove the old social links, and add the new ones.

function alter_twitter_contactmethod( $contactmethods ) {
  // Remove Yahoo YIM
  if ( isset( $contactmethods['yim'] ) )
    unset( $contactmethods['yim'] );

  // Remove AIM
  if ( isset( $contactmethods['aim'] ) )
    unset( $contactmethods['aim'] );

  // Remove Jabber
  if ( isset( $contactmethods['jabber'] ) )
    unset( $contactmethods['jabber'] );

  // Add Twitter
  if ( !isset( $contactmethods['twitter'] ) )
    $contactmethods['twitter'] = 'Twitter';

  // Add Google Plus
  if ( !isset( $contactmethods['googleplus'] ) )
    $contactmethods['googleplus'] = 'Google Plus';

  // Add Facebook
  if ( !isset( $contactmethods['facebook'] ) )
    $contactmethods['facebook'] = 'Facebook';

  return $contactmethods;
}
add_filter( 'user_contactmethods', 'alter_twitter_contactmethod', 10, 1 );

You could add as many social (or other) links as you wanted to. WordPress automagically handles the creation of all the necessary tables.

Creating the Author Bio

Because I’m not particularly creative, I’ve modelled the author bio on the one I use on my own site (using Genesis). I’ve added images for social links… something you’ll see me include on this site soon. The result of the code I’ve provided will render a bio box that looks like this:

Social Bio Profile. Click for larger.

The Google image link will contribute towards an enhanced listing in Google search results.

Not unlike the technique I used to add “anything” to the end of a WordPress post, we’re going to use the_content WordPress filter to add the bio to the end of our post.

function get_author_bio($content='') {
    global $post;
    $twitter = get_the_author_meta( 'twitter', $post->post_author );
    $facebook = get_the_author_meta( 'facebook', $post->post_author );
    $googleplus = get_the_author_meta( 'googleplus', $post->post_author );

    $post_author_name = get_the_author_meta("display_name");
    $post_author_description = get_the_author_meta("description"); 

	if (isset($twitter)) $imageHtml .= '<a href="'.$twitter.'" target="_blank"><img src="http://www.YourDomain.com/images/twitter-icon.png" width="16" height="16" border="0" align="middle"></a>';
     	if (isset($facebook)) $imageHtml .= '&nbsp;<a href="'.$facebook.'" target="_blank"><img src="http://www.YourDomain.com/images/facebook-icon.png" width="16" height="16" border="0" align="middle"></a>';
     	if (isset($googleplus)) $imageHtml .= '&nbsp;<a href="'.$googleplus.'" rel="author" target="_blank"><img src="http://www.YourDomain.com/images/googleplus-icon.png" width="16" height="16" border="0" align="middle"></a>';
	$imageHtml .= '&nbsp;&nbsp;';

    $html="<div style='background: url(http://www.YourDomain.com/images/line.png) top repeat-x; margin: 0 0 40px; padding: 20px 0 0; overflow: hidden;'>\n";
    $html.="<div class='author_text'>\n";
    $html.= "<img width='80' height='80' align='left' style='background-color: #f5f5f5; border: 1px solid #ddd; padding: 4px' src='http://www.gravatar.com/avatar.php?gravatar_id=".md5(get_the_author_email()). "&default=".urlencode($GLOBALS['defaultgravatar'])."&size=80&r=PG' alt='PG'/>";
    $html.= "<div style='padding: 1px 1px 1px 100px;'><strong>".$imageHtml."About ".$post_author_name.'</strong><br>'.$post_author_description."\n";
    $html.="</div>\n";
    $content .= $html;
    return $content;
}
add_filter('the_content', 'get_author_bio');

You can obviously style the box however you choose. I’ve avoided using a CSS style sheet because of the added complexity for some users.

Usage

You will want to download the code and paste it into your theme’s functions.php file or, if you have one installed, your custom functions plugin.

I’ve included a file that you can use the same way as any other WordPress plugin. Just upload to your plugin directory and activate. If you’re using the code in your (custom) functions file, you’ll need to reference images on your own server.

First Name: Your Email Address:

If you liked this article, you may also like:

1. Better WordPress Custom Coding – custom functions/css file
2. Add author details after each post in a WP RSS feed
3. Create a WordPress Gallery from all Images in a Directory (Using TimThumb)
4. Add Thumbnail Image (Links) from a YouTube RSS Feed to WordPress with Shortcode
5. Automatically Convert MP3 links to Audio Players