Author boxes are those little sections on an article page that has a brief bio about the article’s author (you can see mine at the bottom of this article.)
They are a great idea to implement on your site as it can help user interaction and put a face to the author, it also offers chance to mention your other projects or a little about what you do.
This is a really easy tutorial and you only will be working on two files, your single.php file and your stylesheet.
single.php
You will most likely want to display the author box below the article, so after the article and tags insert the following:
<div class="author-box">
<div class="author-left">
<div class="author-pic"><?php echo get_avatar( get_the_author_email(), '80' ); ?></div>
</div>
<div class="author-right">
<div class="author-name"><?php the_author_meta( "display_name" ); ?></div>
<div class="author-bio"><?php the_author_meta( "user_description" ); ?></div>
<div class="author-url"><?php if (get_the_author_url()) { ?><a href="<?php the_author_url(); ?>">Visit <?php the_author(); ?>'s website</a><?php } else { } ?></div>
</div>
<div class="clear"></div>
</div>
That snippet will display the authors avatar, name, description and url, you can alter the avatar size by changing the number in this line:
<?php echo get_avatar( get_the_author_email(), '80' ); ?>
eg: you would like it to be 100px x 100px
<?php echo get_avatar( get_the_author_email(), '100' ); ?>
style.css
I have placed the elements into classes which will allow us to style it up a little. I’m having the authors Avatar/Gravatar on the left and the content on the right, you can tweak and adjust the style to suit.
.author-box { padding: 10px; background: #ccc; border: 1px solid #333;}
.author-left {float:left; width: 80px; margin: 0 15px 0 0;}
.author-right {float:left; font-size: 13px; margin: 5px 0 0 10px;}
.author-pic {border: 1px solid: #ccc;}
.author-name {font-weight:bold;}
.author-bio {padding: 5px 0 5px 0;}
.author-url {color: #555;}
.author-url a {color: #000;}
.author-url a:hover {color: #333;}
.clear {clear:both}
The styling is very basic, but here is a quick example of how it looks:
Conclusion
This is a really effective but simple snippet that will take a few minutes to implement, please remember to backup all files before you edit them!