Display an Author Box in WordPress

This post will teach you how to display an author box in WordPress. You may have seen small excerpts of information at the end of single WordPresss posts that give a little bit of information on the author (and sometimes there’s a picture there as well). Where do these items come from and how do you display these?

It turns out we’ll be getting the information from the “Users” section of the WordPress dashboard. If you click on the “Users” section, you can find the post author in a list of users. From there you can edit the “Biographical Info” section and that’s where we’ll be pulling the author info from. As for the image, we’ll just use Gravatar (what WordPress uses by default)

So to start, we will lay out our basic HTML. We’ll have a wrapper author box and an image and that we will float to the left of the author text. Add the following somewhere down near the bottom of your single.php file of your WordPress theme…

<div class="authorBox">
<h4>About the Author:</h4>  
<div class="authorBoxImage">
</div>
</div>

Now we are going to want to add in the WordPress functions that we can call to get the post author information. Add following code to our markup…

<div class="authorBox">
<h4><?php printf( __( 'About the Author:', 'ninebit' ).' %s', get_the_author() ); ?></h4>  
<div class="authorBoxImage">
<?php echo get_avatar(get_the_author_meta('ID'), 48); ?> 
</div>
<?php the_author_meta('description'); ?>  
</div>
<div class="clearout"></div>

So far so good. Note that number 48 when we’re calling get_avatar(). What that is saying is make the avatar 48px by 48px. If you wanted to make the avatar larger or smaller, you could pass in a different number here.

We’ve got our information down on the page, but it does not yet have any styling. So to style it up we’ll have to add the following CSS somewhere to our stylesheet…

.authorBox {
  padding: 10px 10px 20px 10px;
  overflow: auto;
  border: 1px solid #eee;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  box-shadow: 0 0 2px #eee;
  -moz-box-shadow: 0 0 2px #eee;
  -webkit-box-shadow: 0 0 2px #eee;
}
.authorBox .authorBoxImage {
  float: left;
  margin-right: 10px;
  border-width: 2px;
  border-style: solid;
  border-color: #fcfcfc;
  box-shadow: 0 0 4px #999;
  -moz-box-shadow: 0 0 4px #999;
  -webkit-box-shadow: 0 0 4px #999;
}

The styling is fairly basic. If you wanted to add more bells and whistles to spice things up you could certainly do so.

Now if you go to one of your blog posts in your WordPress site, you should be able to see the post author’s avatar and information at the bottom of the post.