[Resolved] Custom author box in the sidebar?

[Marcel]

Hello,

I wonder how it would be possible for the author box to be in the sidebar, something similar to here.
I think this could be done with a PHP code snippet, using a Block Element, right?
Can you give me a suggestion in this regard?
Many thanks!

Marcel

[David]

Hi there,

will there be multiple authors or just one ?

[Marcel]

One author/ article.

[David]

Sorry what i meant was – will the Site have multiple authors ?

[Marcel]

Multiple authors.

[David]

Sorry for the extra questions. On your example the author has extra meta data, such as the Position / Email and Phone number. Some of that is not standard meta of the user profile in WP. Are they also required ?

[Marcel]

It would be great if those extra meta could be added. Not necessary exactly the same, but as a general idea, YES. Maybe instead of position, to be a website address.

[David]

So for the meta you’re limited to the User profile meta:

https://developer.wordpress.org/reference/functions/get_the_author_meta/

This code for example provides: avatar, static label, author name ( with link ), description, email and website:

<div class="author-box">
    <div class="avatar"><?php echo get_avatar( get_the_author_meta( 'ID' )); ?></div>
    <p class="author-label">Author</p>
    <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>
    <p><?php echo get_the_author_meta( 'user_email' ); ?></p>
    <p><?php echo esc_url( get_the_author_meta( 'url' ), null ); ?></p>
</div>

Add this to a new Hook Element and select generate_before_left_sidebar_content
Check execute PHP, and set the Display Rules to Posts > All Posts.

Then a little CSS for styling:

.author-box {
    text-align: center;
    padding: 10px;
}

.author-box p,
.author-box a {
    margin-bottom: 0.25em;
    font-size: 14px;
    color: #000;
}

.author-box .avatar img {
    border-radius: 50px;
    margin-bottom: 0.5em;
}

.author-box .author-title {
    font-weight: bold;
    margin: 0.5em 0;
}

I added CSS classes to each meta element if you want to tweak them individually.

[Marcel]

David,
This is awesome. Thank you.
One more Q: How could I make the website URL clickable?

[David]

Replace this:

<p><?php echo esc_url( get_the_author_meta( 'url' ), null ); ?></p>

for:

<a href="<?php echo esc_url( get_the_author_meta( 'url' ), null ); ?>"><?php echo esc_url( get_the_author_meta( 'url' ), null ); ?></a>

[Marcel]

Perfect. Thank you very much!

[David]

You’re welcome

[Author]

Posts