
How to Add an Author Info Box in WordPress without plugin
Many WordPress blog/sites have an author information box at the end of their posts. This is the current trends in WordPress sites. In this article I will show you, how you can add an author information box and author Gravatar at the end of your single posts without a plugin.
Adding an “Author Info” box to your posts is a simple upgrade to any WordPress blog/site. In this tutorial, I’ll show you how easy it is .
Here is a screenshot:
WordPress tags and little bit css make it easy to customize your own post’s “Author Info” section. I’ll be making a basic one like the one used on this site in this tutorial. It will load a author picture, the author name, and author description of the post’s.
First open your style sheet file and add this code:
/*----Authore Info box---*/ #author_box{ background:#EFEFEF; border:1px solid #CECFD0; width:580px; margin:10px 0px 0px 0px; margin-bottom:10px; overflow:hidden; padding:5px; } #author_box h4{ font-size:16px; color:#191919; margin:0; padding:10px 10px 5px 10px; } .author_text{ padding-left:100px; } #author_box img { border:1px solid #990000; float:left; margin:10px; padding:10px; } #author_box p{ color:#191919; margin:0; padding:0px 10px 10px 10px; } #author_box h4 > a{ text-decoration:none; } #author_box p{ color:#191919; } /*--end author box--*/
You can modify the CSS file to match your theme.
Now open your single.php and add this code inside your loop.
<!--author info box--> <div id="author_box"> <?php echo get_avatar( get_the_author_email(), $size = '80'); ?> <div> <h4>About <?php the_author_posts_link(); ?></h4> <p><?php the_author_description(); ?></p> </div> </div> <!--/authorbox-->
Originally, the code to render author box with a gravatar associated with the author’s email, linked author name and description.
That’s it.