[Resolved] Custom author box in the sidebar?

Home Forums Support [Resolved] Custom author box in the sidebar?

Home Forums Support Custom author box in the sidebar?

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1537321
    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

    #1537354
    David
    Staff
    Customer Support

    Hi there,

    will there be multiple authors or just one ?

    #1537359
    Marcel

    One author/ article.

    #1537440
    David
    Staff
    Customer Support

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

    #1537446
    Marcel

    Multiple authors.

    #1537488
    David
    Staff
    Customer Support

    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 ?

    #1537984
    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.

    #1538602
    David
    Staff
    Customer Support

    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.

    #1538620
    Marcel

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

    #1538665
    David
    Staff
    Customer Support

    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>

    #1538673
    Marcel

    Perfect. Thank you very much!

    #1538680
    David
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.