DEV Community

Cover image for Author Bio Box CSS in WordPress
SnippFlow
SnippFlow

Posted on

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 = '<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');
Enter fullscreen mode Exit fullscreen mode

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;
    }
}
Enter fullscreen mode Exit fullscreen mode

Full article: Author Bio Box CSS in WordPress
CSS Snippets

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay