How To Add Author Bio In WordPress?

The author bio is an important piece of information that every blog post should have. This tells about the author who has written the post.

Most WordPress themes come with a default author box option. If not, you can read this article to learn How To Add Author Bio In WordPress without any plugin or with a plugin.

How To Add Author Bio In WordPress?

Using a plugin like Simple Author Box, you can add an author bio box. Using the Elementor page builder, you can create an author bio anywhere on the posts.

I am against using a plugin for an author box. You can get the same functionalities without using any plugins.

How To Add An Author Bio Without A Plugin?

You should have a child theme to add custom codes. If you use custom codes in the main theme, all changes will be gone after you update the theme. If you don’t know a child theme, you should write this article first.

Before making any changes, please completely back up your website.

You should go to the function.php file in the child theme folder and add the following lines of code.

//Add custom author box in WordPress
//Author: RiansTech
//email: info@wordpress-1044222-3667901.cloudwaysapps.com

function rianstech_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', 'rianstech_author_info_box' );
  
// Allow HTML in author bio section 
remove_filter('pre_user_description', 'wp_filter_kses');

If you want to customize the look of the author box, you can add this custom CSS in the style.css file located in your child theme folder or the WordPress default custom CSS box.

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

This function will automatically add an author bio box at the bottom of the article. Here is what it will look like. The profile information will be pulled from Gravatar.

You can modify the CSS code to change the looks of your author bio box. For example, if you want to add a border radius around the author bio box and shadow around it, you can use the following code.

/*Adding border radius and box shadow to author box*/

.author_bio_section{
background-color: #F5F5F5;
padding: 15px;
border: 1px solid #ccc;
border-radius: 20px !important;
box-shadow: 0 0 20px 0 rgba(0,0,0,.2) !important;

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

After adding the code and clearing your site cache, the author box will look like this, as shown below.

You can add the CSS code below if you want to show a square author photo instead of a round one. This code also adds rounded corners and box-shadow around the author’s image.

/*Adding border radius and box shadow to the author image*/

.author_bio_section{
background-color: #F5F5F5;
padding: 15px;
border: 1px solid #ccc;
border-radius: 20px !important;
box-shadow: 0 0 20px 0 rgba(0,0,0,.2) !important;

}
}
  
.author_name{
font-size:16px;
font-weight: bold;
}
  
.author_details img {
border: 1px solid #D8D8D8;
border-radius: 10%;
box-shadow: 0 0 20px 0 rgba(0,0,0,.2) !important;
float: left;
margin: 0 10px 10px 0;
}

This is how it will look after adding the above CSS code.

Conclusion: How To Add Author Bio In WordPress

I hope you got an idea about how to add an author bio box in WordPress without using any plugins. You also noticed that using a custom code gives you many customization options to make the box more attractive.

If you have any questions or queries, please write them down in the comment section, and I will be happy to assist.