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.
For some reason the author title is in caps how do I change this?
- spam
- offensive
- disagree
- off topic
Like