Create an Author Bio Box for Posts

You may have admired the author bio box that appears at the end of the blog posts on many websites, including our own  BizTek Builder website.

Screenshot of an author bio box.

While you can find plugins intended for the purpose of adding an author bio box, you can also create your own with PHP code

The code pulls information from the Post author’s WordPress user profile, specifically the following fields:

  • Display name publicly as
    This field maps to the post author’s name in the bio box
  • Biographical info
    This field displays the post author’s bio in the bio box.
  • Profile picture
    The code displays the post author’s photo by extracting the URL for the user’s Gravatar image from the WordPress user profile.

Note: If any of this information is missing from the user profile, the bio box still displays, but without that object.

To create an author bio box that displays on every single post page, add the following code to your child theme’s functions.php file. You shouldn’t have to change anything for it to work, unless you want to tweak it.

// Author bio box
function my_author_bio($content) 
{
   if ( is_singular('post') ) {
      ob_start(); ?>
      <!-- fl-author-bio -->
      <div class="fl-author-bio clearfix media well">
         <div class="fl-author-bio-thumb pull-left">
            <img src="<?php echo get_avatar_url( get_the_author_meta('ID'), 96 ); ?>" alt="<?php the_author(); ?>" class="media-object" />
         </div>
         <div class="fl-author-bio-text media-body">
            <h3 class="media-heading">About <?php the_author(); ?></h3>
            <p><?php echo get_the_author_meta( 'user_description' ); ?></p>
         </div>
      </div>
      <?php
         $authorbox = ob_get_contents();
         ob_end_clean();
         return $content.$authorbox;
   } else { return $content; }
}

add_filter( 'the_content', 'my_author_bio' );

Tips:

  • The value 96 in the <img> tag is the default number of pixels for the avatar height and width in the WordPress get_avatar_url function’s $args parameter for size. You can adjust this number to change the image size. For more information, see the WordPress Code Reference.
  • The <div> structure uses bootstrap classes to position the float the image left relative to the text. For more information, see the documentation for the Bootstrap media object.

 

Last updated on Dec 22, 2016