Add Author Bio in sidebar without any plugin

You could use this PHP instead to display static HTML:

add_shortcode( 'db_author_box', 'db_author_box_shortcode' );

function db_author_box_shortcode() {
    ob_start();

    ?>
        
        <div class="author-box">
            <div class="avatar"><img src="ADD_FULL_URL_TO_IMAGE" /></div>
            <h5 class="author-title">ADD YOUR AUTHOR NAME</h5>
            <div class="author-summary">
                <p class="author-description">ADD YOUR AUTHOR DESCRIPTION</p>
                <a href="ADD_FULL_URL_TO_AUTHOR_PAGE" class="button author-link" title="Read more">Read More</a>
            </div>
        </div>
        
    <?php
        
    return ob_get_clean();

}
?>

Update the the CONTENT and URLS for your needs, this includes image link from media library and link to author page. Then you can add the Shortcode to any widget area for it to be displayed.

The current CSS will still work. Make sure to remove the OLD PHP first.

*ADD PHP*

*ADD CSS*

.author-box {
text-align: center;
padding: 0 20px 20px;
margin-bottom: 20px;
background-color: #f6f5f3;
margin-top: 70px;
}

.author-box .avatar {
position: relative;
top: -20px;
margin-bottom: -20px;
}

.author-box .avatar img {
width: 80px;
border-radius: 50px;
vertical-align: middle;

}

.author-box .author-title {
font-size: 18px;
font-weight: bold;
margin-top: 0.5em;
margin-bottom: 0;
}

.author-box .author-summary,
a.author-link {
font-size: 13px;
}

.author-summary a.author-link {
padding: 6px 12px;
border-radius: 24px;
text-transform: uppercase;
}

https://marcogiangrande.it/postura/

That looks good :) That work for you?

sorry for the late reply :-)

that code works very well for me.

What did you send me "insert it" using the plugin (https://it.wordpress.org/plugins/code-snippets/)?

Glad to hear that.

Code Snippets can be used for adding PHP functions if you're not using a Child Theme. Doesn't look like you needed it.

thank you David

You're welcome

Dear David,

please allow a short question on your code snippet.

The "read more" button doesn't quite fit the design of my page. What can I do to link the name or author picture to the respective author pages?

Thanks in advance!
Jan

Hi there,

you can replace the HTML within the Shortcode with something like this:

<div class="author-box">
    <div class="avatar"><?php echo get_avatar( get_the_author_meta( 'ID' )); ?></div>
    <p class="author-title"><a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>"><?php printf( esc_attr( '%s', 'the author'), get_the_author_meta('display_name') );?></a></p>
    <p class="author-description"><?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?></p>
</div>

This will automatically output the author meta automatically and with the link to the author archive ( attached to author name ).