How to Display an Author Bio Box Below Posts in WordPress

September 11, 2025
How to Display an Author Bio Box Below Posts in WordPress

Adding an author bio box helps readers learn who wrote the article and discover more content from the same author. Below are safe, theme-agnostic methods using template edits, a content filter, and a shortcode—plus optional CSS and social links.

Method 1: Add an Author Box in single.php (Template Edit)

Insert this snippet after the_content() inside your post loop in single.php (or a child theme template):

<?php
$author_id   = get_the_author_meta('ID');
$bio         = get_the_author_meta('description', $author_id);
$display     = get_the_author_meta('display_name', $author_id);
$website     = get_the_author_meta('user_url', $author_id);
$twitter     = get_the_author_meta('twitter', $author_id);   // add via user meta
$facebook    = get_the_author_meta('facebook', $author_id);  // add via user meta

if ( $bio ) : ?>
  <section class="author-box" aria-label="About the author">
    <div class="author-box__avatar"><?php echo get_avatar( $author_id, 96 ); ?></div>
    <div class="author-box__content">
      <h3 class="author-box__name"><a href="<?php echo esc_url( get_author_posts_url( $author_id ) ); ?>"><?php echo esc_html( $display ); ?></a></h3>
      <p class="author-box__bio"><?php echo wp_kses_post( wpautop( $bio ) ); ?></p>

      <ul class="author-box__links">
        <?php if ( $website ) : ?><li><a href="<?php echo esc_url( $website ); ?>" rel="nofollow noopener" target="_blank">Website</a></li><?php endif; ?>
        <?php if ( $twitter ) : ?><li><a href="https://twitter.com/<?php echo rawurlencode( $twitter ); ?>" rel="nofollow noopener" target="_blank">Twitter</a></li><?php endif; ?>
        <?php if ( $facebook ) : ?><li><a href="https://facebook.com/<?php echo rawurlencode( $facebook ); ?>" rel="nofollow noopener" target="_blank">Facebook</a></li><?php endif; ?>
      </ul>
    </div>
  </section>
<?php endif; ?>

Tip: Add custom user meta fields (like twitter/facebook) via user profile plugins or custom code.

Method 2: Append Automatically via the_content Filter

This approach adds the author box to all single posts without editing templates. Put in functions.php (or a site plugin):

<?php
function my_append_author_box( $content ) {
  if ( ! is_singular('post') || ! in_the_loop() || ! is_main_query() ) {
    return $content;
  }

  $author_id = get_the_author_meta('ID');
  $bio       = get_the_author_meta('description', $author_id);
  if ( ! $bio ) return $content;

  $display = get_the_author_meta('display_name', $author_id);
  $avatar  = get_avatar( $author_id, 96 );

  $box  = '<section class="author-box" aria-label="About the author">';
  $box .= '<div class="author-box__avatar">' . $avatar . '</div>';
  $box .= '<div class="author-box__content">';
  $box .= '<h3 class="author-box__name"><a href="' . esc_url( get_author_posts_url( $author_id ) ) . '">' . esc_html( $display ) . '</a></h3>';
  $box .= '<p class="author-box__bio">' . wp_kses_post( wpautop( $bio ) ) . '</p>';
  $box .= '</div></section>';

  return $content . $box;
}
add_filter( 'the_content', 'my_append_author_box', 15 );

Method 3: Use a Template Part (Clean Reuse)

Create template-parts/author-box.php with the markup from Method 1, then include it where needed:

<?php get_template_part( 'template-parts/author-box' ); ?>

Optional: Shortcode to Place Anywhere

Add this to functions.php to insert the box in editors or widgets via [author_box]:

<?php
function my_author_box_shortcode() {
  if ( ! is_singular() ) return '';
  ob_start();
  // You can also include a template part here:
  // get_template_part('template-parts/author-box');
  // For brevity, we reuse Method 1 logic minimally:
  $author_id = get_the_author_meta('ID');
  $bio       = get_the_author_meta('description', $author_id);
  if ( ! $bio ) return '';
  echo '<section class="author-box" aria-label="About the author">'
     . '<div class="author-box__avatar">' . get_avatar( $author_id, 96 ) . '</div>'
     . '<div class="author-box__content">'
     . '<h3 class="author-box__name">' . esc_html( get_the_author() ) . '</h3>'
     . '<p class="author-box__bio">' . wp_kses_post( wpautop( get_the_author_meta('description') ) ) . '</p>'
     . '</div></section>';
  return ob_get_clean();
}
add_shortcode( 'author_box', 'my_author_box_shortcode' );

CSS (Drop in Your Theme or Customizer)

.author-box {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  padding: 16px;
  border-top: 1px solid #e5e5e5;
  margin-top: 32px;
}
.author-box__avatar img { border-radius: 50%; }
.author-box__name { margin: 0 0 6px; font-size: 1.1rem; }
.author-box__bio { margin: 0; color: #444; }
.author-box__links { list-style: none; padding: 8px 0 0; margin: 0; display: flex; gap: 12px; }
.author-box__links a { text-decoration: none; }
@media (max-width: 600px) {
  .author-box { grid-template-columns: 64px 1fr; }
}

Good Practices

  • Show only when bio exists: Skip the box if the author hasn’t filled their profile description.
  • Link to author archive: Help readers find more posts from the same author.
  • Use a child theme: Put template edits in a child theme to keep changes through updates.
  • Add social fields safely: Store social usernames/URLs as user meta and escape with esc_url()/esc_html().

Plugin Alternatives (No Code)

  • Simple Author Box – adds a customizable author box with social icons.
  • Molongui Authorship – supports guest authors and multiple authors.

Summary

  1. Edit single.php or use the the_content filter to render an author box under posts.
  2. Reuse cleanly with a template part or insert on demand via a shortcode.
  3. Style with lightweight CSS; show only when the author has a bio.
  4. Optionally add social links via user meta or use a dedicated plugin.
Avatar

Written by

satoshi

I’ve been building and customizing WordPress themes for over 10 years. In my free time, you’ll probably find me enjoying a good football match.