So, you are using WordPress as your blogging platform. Well then, you might once notice that, if you post your blog post, then, the author of that post will be you. So, what about displaying the Author Bio of yours after the post has been completed.
Now, it might have come in your head that, is it really possible? Do we required to use plugin to display Author Bio of the posts? Well, the answer towards it is, you can display the author bio in WordPress below the posts and also, the use of the plugin is absolutely not required. So, here we will describe about displaying the author bio without the use of the plugin.
Add your Biographical Info in Your Profile section
First of all, what you have to do is, you need to visit Users->Your Profile section via your WordPress dashboard. Now, you can navigate to About Yourself section there and then add the description of yours there in the Biographical Info box, since we will provide the code not to display the author bio till the description has been added here.
Well, if you are confused about how it looks when you navigate for this via your dashboard, then, below is the screenshot to this section:

Now, if you have found out this section and filled up the required section as described above, then, lets move on. Now, we will provide the PHP code about how to display it in the front end.
PHP code to display the Author Bio in Front-End using WordPress
Well, if you have already filled up the required box as stated above, then, lets move ahead. For displaying the Author Bio in your post page, open up your single.php file and then paste this below PHP code in that file in wherever place you want it to be displayed in the front-end:
<?php if (get_the_author_meta('description')) : // Checking if the user has added any author descript or not. If it is added only, then lets move ahead ?>
<div class="author-box">
<div class="author-img"><?php echo get_avatar(get_the_author_meta('user_email'), '100'); // Display the author gravatar image with the size of 100 ?></div>
<h3 class="author-name"><?php esc_html(the_author_meta('display_name')); // Displays the author name of the posts ?></h3>
<p class="author-description"><?php esc_textarea(the_author_meta('description')); // Displays the author description added in Biographical Info ?></p>
</div>
<?php endif; ?>
Here, in the above code, we have described all of the checking and how to display the author name, gravatar image and description in each of them. But, if you are still confused, then, first code above, checks if there is author description added or not in your profile. If it is not added, then, no need to display the author bio at all. Bit, if you want it without description too, then, just remove this condition.
Now, second code is displaying the author gravatar image, with the image size of 100px each, ie, 100px * 100px. The third one, displays the author name added in your profile section via dashboard and the last one finally, displays the description added in your profile in Biographical Info section.
CSS code to display the Author Bio properly
Now, if you have added the required code as stated above and filled up the Biographical Info then, looking at the front-end, you might see that it is not styled properly in your site. So, to make it little bit appealing, you can paste this below CSS code and then look in front-end, it will be better than before:
.author-box {
background-color: #fff;
padding: 20px;
margin: 0 0 40px;
display: inline-block;
width: 100%;
}
.author-box .author-img {
float: left;
margin-right: 20px;
margin-bottom: 20px;
}
.author-box .author-img img {
border-radius: 50%;
}
.author-box .author-name {
font-weight: bold;
clear: none;
display: inline;
}
So, if you have added this CSS code too in your project, then, the display in the front-end of your site would be something like the below one:

Conclusion
If you have followed up this tutorial properly and done the same process and were able to do the same without the use of any plugin in your theme, then, we can assume that you are now more familiar in displaying the Author Bio than before. But, if you are still confused and are willing to know more about it, then, do let us know via the comment form below and we will follow it up.
How can I show author page on homepage (static page)? I am using a plugin – simple author
Maybe check on the plugin documentation about how they implement the author bio within their site and manage? If the theme file has page.php file included in it, then, create a child theme: Tutorial On Creating WordPress Child Theme and duplicate that page and modify the code their as plugin documentation suggest?
However, if the plugin does not support the page, then, maybe follow this very tutorial and see if that helps you out to implement within your pages? For that, you need to probably do the same thing mentioned above via the child theme.
I try it, but still is not showing author information
Have you added up the required Biographical Info of the author in your site and viewed the posts after adding it? The above code should only work if the post author have added the Biographical Info through their profile section.
Awesome, thanks for this!
There is a post to load gravatar image image locally [ http://www.wpbeginner.com/wp-tutorials/how-to-change-the-default-gravatar-on-wordpress/ ] but in my case some how I can’t replicate.
If you are trying to use the image per user differently, instead of Gravatar, then, you can follow this link instead: https://developer.wordpress.org/plugins/users/working-with-user-metadata/.
But, if you are trying to overwrite the avatar globally for the specific users, then, you can follow up this link instead: https://codex.wordpress.org/Plugin_API/Filter_Reference/get_avatar.
Also, you can use this plugin WP User Avatar link: https://wordpress.org/plugins/wp-user-avatar/, if you do not want to customize the code on your own.
Nice snippets. How do you use author image from media uploads folder instead of calling from gravatar.com?
WordPress does not seem to support the image upload option in the user profile section. So, you might need to register new field for the image upload option for the user profile and then later on display it as you like for your site.