We often see the author’s bio at the end of a blog post, especially on blogs which post content or articles from multiple writers. If want to create author info section and running WordPress blog then it’s very easy for you. Just use the WordPress template tags, functions and can put author’s Gravatar profile image, their name, link to their site and biographical information.

 

 

In this post, we’ll learn how to put our code to display author’s info, author’s name, their Gravatar profile picture, their personal website homepage and their short description.

 

Create Author Profile

First create author account into the WordPress users section of the admin panel. After complete the author’s relevant fields, select the appropriate option for how the name should be displayed and enter author’s Gravatar email, their website and biographical information.

 

 

Write out the HTML for Author Info Section

<div id="authorDetails"> **Here Author Gravatar image**
<h4>About the Author: <a href="">**Here Author Name with Link**</a></h4>
<p>**Here Author Description**</p>
</div>

as the author info section sits at the bottom of a post, so just open up your single.php theme file and write out the above HTML code. The entire author info is contained within the div of author info. Within this author’s Gravatar profile image will be displayed. The heading will contain author name with site url and paragraph will contain author’s biographical information.

 

Style up the Author Info Section

.postBox .postBoxMid .postCredentials #authorDetails {
clear:both;
padding-top:15px;
overflow:hidden;
border-top:1px solid #ddd;
}
.postBox .postBoxMid .postCredentials #authorDetails img {
margin-bottom:15px;
}

With the HTML code in place, the CSS styling can be applied to move everything into place. Here the authorDetails div is styled up with some padding around the edges with border. Also the bottom margin given to div authorDetails image.

 

Finally Add the WordPress Template Tags to HTML Code

 

<div id="authorDetails">

<?php echo get_avatar( get_the_author_id() , 60 ); ?>

<h4>About the Author: <a href="<?php the_author_url(); ?>">

<?php the_author_firstname(); ?> <?php the_author_lastname(); ?></a></h4>

<p><?php the_author_description(); ?></p>

</div>

The dynamic author info section will be added to the single.php file with the use of WordPress’ template tags.

email