Display Author Bio Without The Use Of Plugin

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.