Do you want to add an author bio box under your WordPress posts?
If yes, you’re in the right place. Here I’ll show you how to display the author bio box in WordPress. The author bio box is a small section that allows you to display information about the author of the post with social media profiles.
In this tutorial, we will cover three easy ways. So let’s get started.
Adding An Author Bio Box In WordPress
There are several ways to add an author info box in WordPress. You can add the author info box by using your theme, plugin, custom code, etc. Let’s see the theme option first.
Method 1: Using Your Theme
Many WordPress themes come with an author box option. You can use this box to display your author’s bio.
In order to do it, navigate to the 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.
Method 2: Using An Author Bio Box 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.
Method 3: 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 here, you will always be able to add an author info box very easily. But it is recommended to use method one, as it is easy and doesn’t involve any hardship. If you face any problem, ask without any hesitation. If you have liked this article, then help us by sharing this article.
Also Read:
Leave a Reply