How To Add Author Bio In WordPress [Without Plugin]

An author bio is an important piece of information that every blog post should have. This tells about the author who has written the post. That also gives the readers the confidence and credibility of the blog.

Most of the WordPress themes come with a default author box option that you can enable in the customizer. The problem with the author box that comes with the theme is that you can not much customization if you need that. You have to accept it as it is.

But if your theme does not come with an author box, then this article is for you. You can add an author in two different ways, One by using a plugin, and the other is using custom function and CSS code.

How To Add Author Bio?

You can add an author bio using the following plugins. This plugin also allows you to add an author bio in the sidebar. If you use Elementor page builder, then you can create an author bio anywhere on the page.

Personally, I am against using a plugin for an author box as these plugins add custom styling and functions unnecessarily which hampers the speed. That is why using custom code is the best best.

Add An Author Bio Without A plugin

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

Before making any changes, please take a backup of your website. RiansTech will not bear any responsibility for any crashes or issues with your website after adding the code.

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


//Add custom author box in WordPress
//Author: RiansTech
//email: [email protected]

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 located inside your child theme folder or in 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 how it will look like. The profile information will be pulled from the Gravatar

You can modify the CSS code to change the looks for 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 remove the first five lines of the code and add the following piece of code.

/*Adding border radius and box shadow*/

.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. Like that you can modify every section of this author bio box by modifying the custom CSS code.

If you want to show a square author photo instead of the round one, then you can add this below CSS code. 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 like after adding the above CSS code.

Conclusion : How To Add Author Bio Without Plugin

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

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

Rajib

Rajib is the Co-Founder and the Lead Product Analyst of RiansTech. A BTech in Mechanical Engineering and a veteran in the Home Appliance industry with over 17 years of experience in designing appliances for industry leaders like GE and Whirlpool. He also runs a successful niche blog (RiansClub) on Mechanical Engineering

We will be happy to hear your thoughts

Leave a reply

eight − 1 =

RiansTech Reviews
Logo