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. 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 = ''; $output .= ''; $output .= ''; $output .= '' . esc_html($author_name) . ''; if ($author_bio) { $output .= '' . wp_kses_post($author_bio) . ''; } $output .= 'View all posts by ' . esc_html($author_name) . ''; $output .= ''; $output .= ''; return $output; } return ''; } add_shortcode('sf_author_bio', 'sf_author_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; } } Full article: Author Bio Box CSS in WordPress CSS Snippets
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.
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 = '';
$output .= '
';
$output .= '';
$output .= '' . esc_html($author_name) . '
';
if ($author_bio) {
$output .= '' . wp_kses_post($author_bio) . '';
}
$output .= 'View all posts by ' . esc_html($author_name) . '';
$output .= '
';
$output .= '';
return $output;
}
return '';
}
add_shortcode('sf_author_bio', 'sf_author_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;
}
}
Full article: Author Bio Box CSS in WordPress
CSS Snippets
