How to Add Author Info Box to WordPress Posts

Most of the WordPress themes allow you to easily display the author bio box using the default WordPress functionality. If your theme doesn’t provide you this feature built-in or you may want to remove the default and add a new author bio section.

In this article, we will help you with 3 different methods to show an author box including information like author profile, author name, description, social links, and posts by the author. We will also help you in adding the author info box in WordPress using code snippets. We will also help you with how to customize the author’s bio to make it awesome.

Method 1: Add Author Bio in WordPress Theme

If your WordPress theme has built-in functionality and a box is displayed below each post, then you can simply use that to show your author bio. Simply you need to visit Users » All Users page, from here you need to edit the user and add the author information.

edit user

On the user info edit screen, scroll down to add the author’s bio. In the “Biographical Info” field, you can add links to the author’s social media profiles by using HTML.

biographical info WordPress author

To display the author’s image in the author box you need to add a custom author profile image using Gravatar. Later this author profile image is fetched from Gravatar and displayed.

Finally, the author info box looks like this to your WordPress posts after adding biographical info and gravatar’s profile image.

author bio box with image WordPress

Method 2: Adding Author Bio Box Plugin in WordPress

If your theme does not have built-in functionality then you can use a WordPress plugin to display an author info box to your WordPress posts.

Best Free Author Bio Box Plugins for WordPress:

  1. Fancier Author Box
  2. Sexy Author Bio
  3. WP About Author
  4. Simple Author Box
  5. Author Bio Box
author bio box plugin

Method 3: Add Author Info Box without Plugin

Adding an author bio box on your WordPress posts without using a plugin requires you to add code to your website. Before adding any code, you need to create a child theme to save custom code. When you update your theme, the child theme keeps your changes intact.

First, you need to add the following code to your child theme’s function.php file.

<?php
//author box info
function wpb_author_info_box( $content ) {
global $post;
// Detect if it is a single post with a post author
if ( is_single() && isset( $post->post_author ) ) {
// Get author's display name
$display_name = get_the_author_meta( 'display_name', $post->post_author );
// If display name is not available then use nickname as display name
if ( empty( $display_name ) )
$display_name = get_the_author_meta( 'nickname', $post->post_author );
// Get author's biographical information or description
$user_description = get_the_author_meta( 'user_description', $post->post_author );
// Get author's website URL
$user_website = get_the_author_meta('url', $post->post_author);
// Get link to the author archive page
$user_posts = get_author_posts_url( get_the_author_meta( 'ID' , $post->post_author));
if ( ! empty( $display_name ) )
$author_details = '<p class="author_name">About ' . $display_name . '</p>';
if ( ! empty( $user_description ) )
// Author avatar and bio
$author_details .= '<p class="author_details">' . get_avatar( get_the_author_meta('user_email') , 90 ) . nl2br( $user_description ). '</p>';
$author_details .= '<p class="author_links"><a href="'. $user_posts .'">View all posts by ' . $display_name . '</a>';
// Check if author has a website in their profile
if ( ! empty( $user_website ) ) {
// Display author website link
$author_details .= ' | <a href="' . $user_website .'" target="_blank" rel="nofollow">Website</a></p>';
} else {
// if there is no author website then just close the paragraph
$author_details .= '</p>';
}
// Pass all this info to post content
$content = $content . '<footer class="author_bio_section" >' . $author_details . '</footer>';
}
return $content;
}
// Add our function to the post content filter
add_action( 'the_content', 'wpb_author_info_box' );
// Allow HTML in author bio section
remove_filter('pre_user_description', 'wp_filter_kses');
?>
view rawfunctions.php hosted with ❤ by GitHub

This code snippet simply retrieves the author’s information and displays it in the author’s bio section below every post. You need to add custom CSS code to style your author box and matches with your WordPress theme.

/*author info box css*/
.author_bio_section{
background: none repeat scroll 0 0 #F5F5F5;
padding: 15px;
border: 1px solid #ccc;
}
.author_name{
font-size:16px;
font-weight: bold;
}
.author_details img {
border: 1px solid #D8D8D8;
border-radius: 50%;
float: left;
margin: 0 10px 10px 0;
}
view rawstyle.css hosted with ❤ by GitHub

This is how the author info box section displayed on our site.

author info box

Conclusion:

We hope this article helped you in adding the author’s bio and display the author’s infobox to WordPress posts. If you want to change your theme, then see the best 16 WordPress Newsportal theme.

Read more.

12 Best WordPress Plugins for your New Blog in 2020
13 Ways To Reduce Loading Time Of Your WordPress Website

Enjoyed this article? Stay informed by joining our newsletter!

Comments

You must be logged in to post a comment.

About Author

Tech Foorti is the first largest tech company that helps people to earn money by just writing articles.