How to Add an Author Bio Box in WordPress Without a Plugin
Establishing a personal brand and engaging with your readers is more important than ever. One of the simplest ways to do this is by adding an author bio box to your WordPress posts. While many plugins promise a quick solution, there are times when you want to keep your website lean and avoid relying on extra plugins.
In this guide, we’ll walk you through the process of manually adding an author bio box to your WordPress site without using a plugin.
Why Add an Author Bio Box?
An author bio box is not just a simple piece of design—it serves multiple purposes:
- Builds Credibility: Let your readers know who’s behind the content.
- Enhances Engagement: Encourage your visitors to connect with you on social media.
- Improves SEO: Search engines appreciate rich author information that can lead to better indexing and relevancy signals.
- Fosters Trust: A personal touch often makes your content more relatable and trustworthy.
By manually creating an author bio box, you maintain complete control over its design and functionality, ensuring that it perfectly complements your website’s aesthetic and performance goals.
Step 1: Create a Child Theme (Optional But Recommended)
Before modifying your theme’s files, creating a child theme is best. This way, your changes won’t be lost during a theme update.
Navigate to your WordPress installation’s wp-content/themes/ directory and create a new folder.
Name it something like yourthemename-child.
Inside your child theme folder, create a style.css file with the following content:
/*
Theme Name: Your Theme Child
Templates: twentytwentyfive
Author: Your
Template: yourtheme
*/
Replace yourtheme with the folder name of your parent theme. This file can also be used to add custom CSS later.We will use twentytwentyfive for this example.
In the same folder, create a functions.php file. Start with a basic PHP opening tag and enqueue the parent theme’s stylesheet:
<?php
function yourtheme_child_enqueue_styles() {
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'yourtheme_child_enqueue_styles');
?>
Activating a child theme helps ensure that your customizations are update-proof.
Step 2: Edit Your Theme’s Template File
The next step involves editing your theme’s template file where you want the author bio box to appear, typically at the bottom of single post pages.
Adding Custom Fields to User Profile
Add the following code to your child theme’s functions.php file:
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');
Step 3: Styling Your Author Bio Box
With the backend functionality in place, the next step is adding custom CSS to style your author bio box. Add the following CSS to Additional CSS from the theme Customizer:
.author-bio-box {
display: flex;
align-items: flex-start;
background: #f9f9f9;
border: 1px solid #ddd;
padding: 20px;
margin-top: 40px;
}
.author-avatar {
margin-right: 20px;
}
.author-avatar img {
border-radius: 50%;
}
.author-info {
flex: 1;
}
.author-name {
margin: 0 0 10px;
font-size: 1.5em;
}
.author-description {
font-size: 1em;
margin: 0 0 15px;
}
.author-social a {
margin-right: 10px;
text-decoration: none;
font-weight: bold;
color: #0073aa;
}
.author-social a:hover {
text-decoration: underline;
}
Step 4: Testing Your Implementation
After adding the PHP and CSS code, it’s time to test your changes:
- Create or Edit a Post: Open a single post on your site and scroll to the bottom to see your author bio box in action.
Conclusion
Adding an author bio box to your WordPress posts without a plugin may seem challenging. Still, by following these steps, you can create a customized, lightweight solution that enhances your site’s engagement and personal touch.
You maintain complete control over your website’s performance and design by manually editing your template files, adding custom fields, and styling the box with CSS. With your new author bio box, your readers will better understand who is behind the content. This builds trust and encourages visitors to engage further, whether by following you on social media, exploring more posts, or connecting through your dedicated author page.
