How To Add An Author Info Box In WordPress

author info box

Are you trying to show your author info by adding an author info box in WordPress? The author info box is a small section that allows you to display information about the author of the blog and show their social media profiles. 

There are several themes in WordPress that allows you to easily display author info by default. However, you may not find it in some themes. 

In this post, I am going to show you several methods to easily add an author info box in WordPress. 

Let’s dig in. 

How To Add An Author Info Box in WordPress

There are several ways to add author info box in WordPress. You can add the author info box by using your theme, plugin, custom code, etc. Here I am going to show you three methods.

Adding Author Info Box By Using Your Theme

Many WordPress themes come with an author info box below each post. You can use this box to display your author’s bio. 

In order to do it, navigate to Users -> All Users page. Now click on the ‘Edit’ button of the user. 

A new page will open, scroll down to the ‘Biographical Info’ section. In this section, add all the information of the author. You can also add HTML in this field to add links. 

If the author has no profile picture, tell the author to set it from Gravatar. Finally, click on the updated user, and you will be able to see the author info box below the content. 

Adding Author Info Box By Using A Plugin

If you are using a theme that doesn’t come with an author info box, then you can use this method. In this method, you are going to need a plugin named Author Bio Box

Install & activate the plugin, then go to Settings -> Author Bio Box page to configure the settings. 

From this page, choose gravatar size, colors, location, and alter other changes for the author info box. Once you have configured the plugin, click on the save changes button. 

Now go to Users -> All Users page and click on the ‘Edit’ button for the user you want to change.

At here, scroll down to the ‘Contact Info’ section and add all social media profile links of the author. The plugin will only show icons for social media where you enter a URL. 

Now scroll down to the ‘Biographical Info’ section and add all the author’s information here. You can also use HTML here to add links. 

Now click on the Update user button, and you are done. 

Adding Author Info Box By Using Custom Code

In this method, you need to add code to your website. 

First, navigate to ‘Appearance -> Theme Editor’ then click on Theme Functions(functions.php)

Now copy the below code and paste it in the editor.

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

Don’t forget to update the file. Now the styling of the info box is left. 

Navigate to Appearance -> Customize, then click on Additional CSS

Now paste the following code in the editor.

.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;
}

Then click on the Publish button above. Now you got a designed author info box. 

Last Words

No matter which method you follow at here, you will always be able to add an author info box very easily. If you face any problem, ask without any hesitation. If you have liked this article, then help us by sharing this article. 

Leave a Comment

Your email address will not be published. Required fields are marked *

Copy link
Powered by Social Snap