One of the features that is now being included in our StudioPress theme updates is the Author Box. This is a great way to display an image of the post author, as well as some biographical information. Many people have asked how to include them in their sites and this post explains how.

Here’s an example of the Author Box from the Corporate theme:

If you want to include this feature into your StudioPress theme, the first thing to do is open your index.php file and place this code where you want the author box to display:

<div class="authorbox">
<p><?php echo get_avatar( get_the_author_email(), '72' ); ?><strong>
<?php _e("About", 'studiopress'); ?> <?php the_author(); ?></strong><br />
<?php the_author_meta( 'description' ); ?></p>
<div class="clear"></div>
</div>

Some of our index.php files vary, so you’ll need to be a little experimental where you place this code – generally, in the Corporate theme you can place it immediately after this:

<div class="postmeta">
<p><?php _e("Filed under", 'studiopress'); ?> <?php the_category(', ') ?> &middot;
<?php _e("Tagged with", 'studiopress'); ?> <?php the_tags('') ?></p>
</div>

It’s important that you understand what the code above does and specifically how it functions. Let’s go through it piece by piece and I’ll explain.

For starters, take a look at this code:

<?php echo get_avatar( get_the_author_email(), '72' ); ?>

This code displays the Gravatar of the post author and sets the image size to 72px – if you want to increase/decrease the Gravatar size, simply modify the 72.

Next, we’ll take a look at this code:

<?php _e("About", 'studiopress'); ?> <?php the_author(); ?></strong><br />

This code displays the Author Name, which can be specified on the User page in your WordPress dashboard.

Finally, we’ll take a look at this code:

<?php the_author_meta( 'description' ); ?>

This code displays the Biographical Info, which can be specified in the About Yourself section in the User page on your WordPress dashboard.

Now we need to add some style:

In addition to adding the code we provided to your index.php file, you will also want to add some styling elements to the style.css file. Here is the CSS that we used in the Corporate theme:

.authorbox {
	background: #F7F7F7;
	margin: 20px 0px 0px 0px;
	padding: 10px;
	border: 1px solid #E6E6E6;
	}
	
.authorbox p {
	margin: 0px;
	padding: 0px;
	}
	
.authorbox img {
	background: #FFFFFF;
	float: left;
	margin: 0px 10px 0px 0px;
	padding: 3px;
	border: 1px solid #CCCCCC;
	}

And that is all you need to add an author box to your StudioPress theme – if you have any questions about this, feel free to leave a comment. We’re currently adding this feature to all of our themes via updates, as well as including it in any new themes that come out. Oh, by the way, here’s another example of the author box ↓

There are several reasons why you’d want to show author information blocks on your site. It could be either because you have multiple authors, or you allow for guest posts on your blog. One of the reasons why people would want to guest post is because they can gain some extra exposure.

A cool way of doing this is using the built-in author functions with some extra’s to add a “Guest post by” block to your template. I’ve done this on yoast.com, and you can find an example here.

How I did this? Using Gravatars and the new author_meta functrions in WordPress of course!

WordPress has added template tags you can use to show author info and Gravatars, so it’s pretty easy. So you can just add the following code to your theme. I’ve annotated all lines, you should be able to copy paste and modify:

<?php
  // If it's not written by me (username admin), it's a guest post,
  // hence check for that:
  if (get_the_author_meta('user_login') != "admin") {
        // If it's a guest post, show the appropriate block
?>
    <div class="guestauthor" id="
      <?php the_author_meta('user_email'); ?>">
<?php
        // Make sure the image is right aligned
        function avatar_align($avatar) {
            return str_replace("class='","class='alignright ",$avatar);
        }
        add_filter('get_avatar','avatar_align',10,1);
  
        echo get_avatar( get_the_author_meta('ID'), '60' );
        // Show the author's information
?>
        <h3>Guest post by: <?php the_author_meta('display_name'); ?></h3>
        <p><?php the_author_meta('description'); ?></p>
    </div>
<?php
    }
?>

The last thing is that, in order for HTML to be allowed in user profiles, you need to add the following line to your themes functions.php:

// Allow HTML in user profiles
remove_filter('pre_user_description', 'wp_filter_kses');

That’s it! You now have cool “Guest post by” blocks on your site!