How to Add a Author Bio Box to WordPress Posts

Displaying an author bio box at the end of your blog posts is a wonderful way to provide readers with more information about the author, improve engagement, and build a personal connection between the author and the audience. This can be especially important for blogs with multiple authors, as it helps highlight individual contributors and their expertise.

Add below code snippet to the functions.php file of your theme to add a custom author bio box to your WordPress posts. This box will display the author's profile picture, name, and biography at the end of every single post.

// Display Author Bio box after the post content
function themesdna_author_bio_box($content) {
    if (is_single() && get_the_author_meta('description')) {
        $author_bio = '<div class="tdna-ab-box">';
        $author_bio .= get_avatar(get_the_author_meta('ID'), 100); // Display author profile picture
        $author_bio .= '<div class="tdna-ab-details"><h4 class="tdna-ab-name">' . get_the_author_meta('display_name') . '</h4>'; // Display author name
        $author_bio .= '<div class="tdna-ab-description">' . get_the_author_meta('description') . '</div></div>'; // Display author bio
        $author_bio .= '</div>';
        $content .= $author_bio;
    }
    return $content;
}
add_filter('the_content', 'themesdna_author_bio_box');

// Add CSS for the author bio box
function themesdna_author_bio_css() {
    echo '
    <style>
    .tdna-ab-box {
        margin: 20px 0;
        padding: 10px;
        background: #f9f9f9;
        border: 1px solid #ddd;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
           -moz-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }
    .tdna-ab-box img {
        -webkit-border-radius: 50%;
           -moz-border-radius: 50%;
                border-radius: 50%;
        margin-right: 20px;
    }
    .tdna-ab-box h4 {
        margin: 0 0 10px;
        font-size: 1.5em;
    }
    .tdna-ab-description {
        margin: 0;
    }
    </style>
    ';
}
add_action('wp_head', 'themesdna_author_bio_css');

Note: To take full advantage of this feature, make sure each author on your site has a completed bio. You can add this by going to the WordPress admin panel:

1. Navigate to Users > Profile.
2. Fill in the "Biographical Info" section with the author’s bio.
3. Optionally, you can upload a profile picture by associating the email with a Gravatar account.