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:

author-bio

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:

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:

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.

, , , , , , , , , , , , , , , , , , , , , , , ,

Post navigation

Bishal Napit

Bishal Napit is a WordPress theme developer from Tansen, Palpa, with a passion to learn more on WordPress.

5 thoughts on “Display Author Bio Without The Use Of Plugin

  1. Nice snippets. How do you use author image from media uploads folder instead of calling from gravatar.com?

    1. 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.

    1. 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.

Leave a Reply