- Dec 13, 2008
- 90 Comments
- Tutorials
How to Build an Author Box in WordPress
Are you claiming your work? A name under the post title is a good start, but what if a reader wants to find out just a little bit more? Are you offering a face to the article? How about a little background? Contact information?
Adding an “About the Author” box to your posts is a simple upgrade to any WordPress blog. In this tutorial, we’ll show you how easy it is to brand your posts in under 10 minutes.
The Goal
WordPress tags make it especially easy to customize your own post’s “About the Author” section. We’ll be making a basic one like the one used on this site in this tutorial. It will load a picture, the name, and description of the post’s author. Here’s a screenshot so you won’t have to scroll to the bottom of the post.
Add the CSS
The CSS below will control the background color, width and text alignment. Change width’s and color schemes as needed to fit your scheme. If you do, remember to give the text enough margin keep it from overlapping the Gravatar image.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
#authorbox{ background:#EFEFEF; border:1px solid #CECFD0; width:638px; margin:0 auto; margin-bottom:10px; overflow:hidden; } #authorbox h4{ font-size:16px; color:#191919; margin:0; padding:10px 10px 5px 10px; } .authortext{ padding-left:100px; } #authorbox img{ margin:0; padding:10px; float:left; } #authorbox p{ color:#191919; margin:0; padding:0px 10px 10px 10px; } #authorbox h4 > a{ text-decoration:none; } #authorbox p{ color:#191919; } |
Make the Author Box
Everything that appears in the author box is automatically loaded from outside sources. This makes updating surprisingly low maintenance. The code block below loads a Gravatar via the author’s email address, the name with a link to other posts the author has made, and a description loaded from the user’s profile within WordPress. Recall that the div class “authortext” is responsible for keeping text from overlapping the Gravatar icon.
|
1 2 3 4 5 6 7 |
<div id="authorbox"> <?php if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '80' ); }?> <div class="authortext"> <h4>About <?php the_author_posts_link(); ?></h4> <p><?php the_author_description(); ?></p> </div> </div> |
If you’re looking to include any additional author information use the WordPress Codex as a reference for the necessary tags. You can find a live demo of the author box about 100 or so pixels below this paragraph.
