Author Bio Box CSS in WordPress

// ---------------------------------------------------------- // // 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'); 

/* ---------------------------------------------------------- */ /* 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; } }