Author Bio Box CSS in WordPress

This Bio Box css code can help with reader engagement by giving the author more context and encouraging readers to read more of their posts.

Author Bio Box PHP

// ---------------------------------------------------------- //
//                   Snippflow Author Box                     //
// ---------------------------------------------------------- //
function sf_author_box() {
    if (is_single()) {

        $author_id = get_the_author_meta('ID');
        $author_name = get_the_author_meta('display_name');
        $author_bio = get_the_author_meta('description');
        $author_posts_url = get_author_posts_url($author_id);
		$author_avatar = get_avatar_url($author_id, array('size' => 96));

        $output = '<div class="sf-author-bio">';
		$output .= '<img src="' . $author_avatar . '" alt="Avatar" class="author-avatar" />';
		$output .= '<div class="desc-wrapper">';
        $output .= '<h4>' . esc_html($author_name) . '</h4>';
        if ($author_bio) {
            $output .= '<p>' . wp_kses_post($author_bio) . '</p>';
        }
        $output .= '<a href="' . esc_url($author_posts_url) . '">View all posts by ' . esc_html($author_name) . '</a>';
		$output .= '</div>';
        $output .= '</div>';

        return $output;
    }
    return '';
}

add_shortcode('sf_author_bio', 'sf_author_box');

Author Bio Box CSS

/* ---------------------------------------------------------- */
/*                     Snippflow Author Box                   */
/* ---------------------------------------------------------- */
.sf-author-bio { 
	display: flex; 
	align-items: center; 
	gap: 20px;
	border-top: 1px solid rgba(0,0,0,.1);
	padding-top: 30px;
	margin-top: 30px;
}
.sf-author-bio .author-avatar {
	display: inline-flex;
	flex-shrink: 0;
	width: 80px; 
	height: 80px; 
	line-height: 0; 
	border-radius: 100%;
}
.sf-author-bio .desc-wrapper > * {
	margin: 0 0 10px 0;
}
.sf-author-bio .desc-wrapper > *:last-child {
	margin-bottom: 0;
}
.sf-author-bio .desc-wrapper p,
.sf-author-bio .desc-wrapper a {
	font-size: 0.9rem;
}

@media only screen and (max-width: 767px) {
	.sf-author-bio {
		flex-direction: column;
		text-align: center;
	}
}

How to use?

a. Adding Shortcode to a Page or Post

• [sf_author_bio] – display author box

b. Adding Shortcode to Source Files

<?php

// Add the Author Bio Box
function sf_add_author_box_to_single_post($content) {
    if (is_single() && is_main_query()) {
        $content .= sf_author_box();
    }
    return $content;
}
add_filter('the_content', 'sf_add_author_box_to_single_post');

?>