Bio Shortcodes for WordPress

Need to add a load of bios (perhaps of your blog authors) to a single page in a consistent manner? Best to use a shortcode. Add the following to your theme’s functions file:

/**
 * Outputs a fixed format for bio information.
 *
 * Usage in the post content would be:
 * [bio name="Gary Jones" twitter="garyj" authorname="Gary" image="http://example.com/gary.jpg" url="http://example.com"] Bio content here [/bio]
 * All attributes are optional.
 *
 * @return string
 * @author Gary Jones
 * @version 2010-02-17
 * @since 2010-02-17
 */
function bio_shortcode( $atts, $content = null ) {

  $defaultImageUrl = 'http://code.garyjones.co.uk/wordpress/wp-content/uploads/bio100x100.png';
  $imageSize = 100;

   extract( shortcode_atts( array(
      'name' => 'this author',
      'image' => $defaultImageUrl,
      'authorname' => '',
      'url' => '',
      'twitter' => ''
      ), $atts ) );

    $output = '<div class="bio-container">'
            . '<div class="bio">' . do_shortcode($content) . '</div>'
            . '<div class="bio-details">'."\n"
            . ''."\n";
    if ( '' != $authorname || '' != $url || '' != $twitter ) {
      $output .= '<ul>';
      if ( '' != $authorname ) {
        $output .= '<li class="bio-authorname">View All Posts</li>';
      }
      if ( '' != $url ) {
        $output .= '<li class="bio-url">View Their Site</li>';
      }
      if ( '' != $twitter ) {
        $output .= '<li class="bio-twitter">Follow on Twitter</li>';
      }
      $output .= '</ul>';
    }
     $output .= '</div>'."\n".'</div>';
    return $output;
}
add_shortcode('bio', 'bio_shortcode');

Usage

[bio name="Gary Jones" twitter="garyj" authorname="Gary" image="http://example.com/gary.jpg" url="http://example.com"] Bio content here [/bio]

All attributes are optional, and dictate whether an element of the HTML output appears or not.

Suggested Styling

.bio-column {width: 370px;float:left;margin: 0 15px;}
#bio-beta {float: right;}
.bio-container {background: #F4F4F4;border: 1px solid #E4E4E4; margin: 0 0 20px;}
.bio {background: white;float: right; width: 208px; padding: 15px; min-height: 200px;font-size: 0.8em;}
.bio-details{width: 130px;float:left;}
.bio-details img {width: 100px; margin: 15px;}
.bio-details ul {list-style: none;margin-left: 15px;}
.bio-details a {font-size: 0.6em;}
.bio-twitter a {background: transparent url(images/twitter-tiny.gif) no-repeat center left;padding: 0 0 0 19px;}

/* Float clearing for IE6: */
* html .clearfix,
* html .bio-container
{
  height: 1%;
  overflow: visible;
}
/* Float clearing for IE7: */
*+html .clearfix,
*+html .bio-container
{
  min-height: 1%;
}
/* Float clearing for everyone else: */
.clearfix:after,
.bio-container:after
{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}

Demo

http://code.garyjones.co.uk/demos/bios/

This demo uses the suggested styling, and multiple [bio] elements inside a couple of divs (to create the columns).