How to Add an Author Info Box in WordPress Posts
Many blogs have an author information box at the end of their posts. This is becoming one of the biggest trends in WordPress blogs. In this article we will show you, how you can add an author information box at the end of your single posts without a plugin.
Screenshot:
First open your style.css file in your themes folder and add this code:
#authorarea{
background: #f0f0f0;
border: 1px solid #d2d2d2;
padding: 10px;
width:500px;
overflow:hidden;
color: #333;
}
#authorarea h3{
font-size: 18px;
color:#333;
margin:0;
padding:10px 10px 5px 10px;
}
#authorarea h3 a{
text-decoration:none;
color: #333;
font-weight: bold;
}
#authorarea img{
margin:0;
padding:10px;
float:left;
border: 1px solid #ddd;
width: 100px;
height: 100px;
}
#authorarea p{
color:#333;
margin:0;
padding:0px 10px 10px 10px;
}
#authorarea p a{
color:#333;
}
.authorinfo{
padding-left:120px;
}
Note: You might have to modify the CSS file to match your theme formatting.
Once you have added that then open your single.php and add this code inside your loop.
<div id="authorarea">
<?php if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '100' ); }?>
<div class="authorinfo">
<h3>About <?php the_author_posts_link(); ?></h3>
<p><?php the_author_description(); ?></p>
</div>
</div>
There are many ways to get the images for the author profile, but we used Globally recognized Avatars, Gravatar. This code will get the avatar associated with the author’s email.
If you have any questions, feel free to ask in the comments.
Comments
9 Responses to “How to Add an Author Info Box in WordPress Posts”Share Your Opinions
Tell us what you're thinking...
and if you want a pic to show with your comment, then get gravatar!
Please make sure that you have read our Comment Policy.
For the loop, do I need to paste it specifically or can I just paste at the end of the file?
It is better if you post it at the end of the loop.
Awesome post with nice explanation. I was searching these codes for my blog post. Thanks for sharing this nice post.
Excelent! I was looking this for my job
Thanks!!!
I love the Comment box you have on your site! Is it a plugin or did you code it yourself? Can you help me get my comment box looking like that! ALSO, What plugin are you using to have the twitter and facebook widget on the lefthand side of your screen?
Thanks in advance! BTW, your site is super clean, I love the layout!
The only plugin we are using for the comment box is subscribe to comment. Everything else is simple codes. For the floating widget, we are going to be releasing that plugin for free in the coming week, so stay updated.
Is there a way to exclude the author box from a specific category? Please help. Thank you very much!
p.s. thank you for this tutorial, it worked perfectly!
Yes… You can use the conditional tag is_category (then display nothing) else display this. Or the easier way to do this would be creating a separate single.php for that specific category and remove this code. All you have to do is create single-categoryname.php or single-categoryid.php