25% off ProSNIPC25OFF

Author Bio Box

Appends a styled author biography card (avatar, name, bio, website link) below single post content.

Module2 parts · by SnipCraft

PHPContent Filter

php
<?php
if ( ! function_exists( 'scseed_author_bio_box' ) ) {
    function scseed_author_bio_box( $content ) {
        if ( ! is_single() || ! in_the_loop() || ! is_main_query() ) {
            return $content;
        }
        $author_id  = (int) get_the_author_meta( 'ID' );
        $name       = get_the_author_meta( 'display_name' );
        $bio        = get_the_author_meta( 'description' );
        $url        = get_the_author_meta( 'user_url' );
        $avatar_url = get_avatar_url( $author_id, [ 'size' => 80 ] );
        if ( empty( $name ) ) {
            return $content;
        }
        $box  = '<div class="scseed-author-box">';
        $box .= '<img class="scseed-author-avatar" src="' . esc_url( $avatar_url ) . '" alt="' . esc_attr( $name ) . '" width="80" height="80" loading="lazy">';
        $box .= '<div class="scseed-author-info">';
        $box .= '<span class="scseed-author-label">' . esc_html__( 'Written by', 'default' ) . '</span>';
        $box .= '<strong class="scseed-author-name">' . esc_html( $name ) . '</strong>';
        if ( ! empty( $bio ) ) {
            $box .= '<p class="scseed-author-bio">' . esc_html( $bio ) . '</p>';
        }
        if ( ! empty( $url ) ) {
            $box .= '<a class="scseed-author-link" href="' . esc_url( $url ) . '" target="_blank" rel="noopener noreferrer">' . esc_html__( 'Visit Website', 'default' ) . '</a>';
        }
        $box .= '</div></div>';
        return $content . $box;
    }
}
add_filter( 'the_content', 'scseed_author_bio_box' );

CSSStyles

css
.scseed-author-box {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 24px;
    margin-top: 40px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fafafa;
}
.scseed-author-avatar {
    flex-shrink: 0;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    object-fit: cover;
}
.scseed-author-info   { display: flex; flex-direction: column; gap: 4px; }
.scseed-author-label  { font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 0.05em; }
.scseed-author-name   { font-size: 17px; font-weight: 700; color: #111; }
.scseed-author-bio    { font-size: 14px; color: #555; margin: 4px 0 0; line-height: 1.6; }
.scseed-author-link   {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #7c5cff;
    text-decoration: none;
}
.scseed-author-link:hover { text-decoration: underline; }
@media (max-width: 540px) {
    .scseed-author-box { flex-direction: column; }
}
#posts#content#author#bio