Archived topic
Custom author box in the sidebar?
11 replies · Started by Marcel on November 19, 2020
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
Hi there,
will there be multiple authors or just one ?
One author/ article.
Sorry what i meant was - will the Site have multiple authors ?
Multiple authors.
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 ?
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.
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.
David,
This is awesome. Thank you.
One more Q: How could I make the website URL clickable?
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>
Perfect. Thank you very much!
You're welcome