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 an author box in posts without using any plugin or with a plugin.
How To Add Author Bio?
You can add an author bio box using a plugin like Simple Author Box. If you use the Elementor page builder, you can create an author bio anywhere on the posts.
Personally, I am against using a plugin for an author box. You can get the same functionalities without using any plugins also.
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, then all changes will be gone after you update the theme. If you don’t know what a child theme is, you should write this article first.
Before making any changes, please take a complete backup of 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: [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 file located in 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 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 piece of 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.
If you want to show a square author photo instead of the round one, you can add the CSS code below. 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 Without Plugin
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 a lot of customization options for you to make the box more attractive.
If you have any questions or queries, please write in the comment section and I will be happy to assist.