How to Add an Author Info Box in WordPress Posts

Do you want to add an author box to your blog post? The author box is a section that has some information about the author of the blog, social media links etc.

Some WordPress themes may already have this feature, but some themes do not have it.

In this blog, I will tell you something so that we can show the author box in our blog easily. and how can we Customize it to make it more useful

When and why do we need author box

Telling who is the author of the blog builds a trust with the website to the visitor.

For single author website, only one about page has to be created but on multi author website we should give author box with every blog post.

It helps the visitor if the visitor wants to read only one author’s post. And if you want to interact directly with the author.

And if you want more authors to submit their content on your website, then author box attracts them even more.

Method 1: Adding Author Bio Using Your WordPress Theme

If your WordPress theme may have the feature of adding author box, then you can simply use it to show author box.

You have to go to your website May Users >> All Users and click on Edit User which you want to change.

On the profile edit screen scroll down the page to the “Biographical Info” section and author Bio field you can add author information you can also use html on that field and add author’s Social media links

Now you can go to any blog and see that the author box at the end of the blog.

Method 2. Adding Author Info Box in WordPress Using a Plugin

If your theme doesn’t support author box or you want to customize author box then this method is for you.

This method we use “Add Author Info Box” plugin

You have to install the plugin and customize its settings according to your needs

Method 3. Add Author Info Box Manually (Coding Required)

In this method you have to add the following code in the function.php file of your WordPress website theme

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');</pre>

This Code get the authour’s Information below the every blog. If you want to have a good design author box then you need to add specific given CSS in your theme’s CSS file

.author_bio_section{
background-color: #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;
}

You will see this author box on the website like the image given below