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.

Categories: Tutorials, Wordpress

About

He is a freelance graphic designer with more than 15 years of design experience, including both print and web design.

.. Write a Guest Post ..


3 Responses so far.


  1. simplyvicky says:

    A very easy to understand explanation…

  2. nigel says:

    good tutorial…

  3. antodoms says:

    I love this tutorial.I wanted a plugin for this but the manual editing stuff was much easier. Thanks to your post , I have added author discription at my blog too….. 😀

Copyright © 2017 gopalbonline.com