(+84) 463.28.7979

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:

Author Info Box in WordPress Posts

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>
<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.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>