[Support request] Align Author Page Content

Home Forums Support Align Author Page Content

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1085568
    24xstudio

    Hey,

    I want my author pages to look like this page both on Mobile and Desktop: https://bit.ly/33xCrn3

    Plus is there any way I can also use social links of the authors like the above page I have mentioned.

    Thanks 🙂

    #1086000
    24xstudio

    Please look into this ticket also 😀

    #1086419
    David
    Staff
    Customer Support

    Hi there,

    requires a bit of custom work to do this, give this a try

    1. Create a new hook element.
    2. Add this for the hook content:

    <?php
    
    $title = get_the_author();
    $description = get_the_author_meta( 'description');
    $avatar = get_avatar( get_the_author_meta( 'ID' ), 150 );
    
    ?>
    
    <div class="author-wrap">
        <div class="inside-author-wrap grid-container">
            <?php echo 
            '<div class="author-avatar">' . $avatar . '</div>
            <div class="author-bio"><h1 class="vcard">' . $title . '</h1>
            <p class="author-description">' . $description . '</p></div>';
            ?>
        </div>
    </div> 

    3. Select the after_header hook and check Execute PHP.
    4. Set Display Rules for the Author Archives

    5. Add this CSS:

    .author-wrap {
        background-color: #f1f5f7;
        padding: 60px 0;
    }
    
    .inside-author-wrap {
        text-align: center;
    }
    
    .author-avatar img {
        border-radius: 100%;
        border: 4px solid #fff;
        vertical-align: middle;
    }
    
    .author-bio h1 {
        margin-bottom: 0.25em;
    }
    
    @media (min-width: 600px) {
        .inside-author-wrap {
            display: flex;
            text-align: left;
        }
    
        .author-avatar {
            margin-right: 40px;
        }
    }

    Adding social links to the user profile will require a plugin or custom development.

    #1086454
    24xstudio

    Thanks for the help. I have applied the codes but there is duplicate issue.

    Please check the URL

    #1086529
    David
    Staff
    Customer Support

    Now add this PHP snippet:

    add_action( 'wp', function() {
        if ( is_author() ) {
            remove_action( 'generate_archive_title', 'generate_archive_title' );
        }
    } );

    https://docs.generatepress.com/article/adding-php/

    #1086744
    24xstudio

    Big Thanks.

    The code is working.

    Can add social profile links here: https://prnt.sc/q4d89f

    I have the code which adds Twitter & Facebook Profiles. But I don’t know how we can integrate to work as I want.

    Here is the code I got from WPBeginner (https://www.wpbeginner.com/wp-tutorials/how-to-display-authors-twitter-and-facebook-on-the-profile-page/):

    $twitter = get_the_author_meta( 'twitter', $post->post_author );
    $facebook = get_the_author_meta( 'facebook', $post->post_author );
    echo '<a href="https://twitter.com/' . $twitter .'" rel="nofollow" target="_blank">Twitter</a> | <a href="'. $facebook .'" rel="nofollow" target="_blank">Facebook</a>';
    #1086771
    David
    Staff
    Customer Support

    Not sure about getting the yoast meta on the archive page as that codes is designed for the single post. Try this – might work:

    <?php
    
    $title = get_the_author();
    $description = get_the_author_meta( 'description');
    $avatar = get_avatar( get_the_author_meta( 'ID' ), 150 );
    $twitter = get_the_author_meta( 'twitter' );
    $facebook = get_the_author_meta( 'facebook' );
    
    ?>
    
    <div class="author-wrap">
        <div class="inside-author-wrap grid-container">
            <?php echo 
            '<div class="author-avatar">' . $avatar . '</div>
            <div class="author-bio">
                <h1 class="vcard">' . $title . '</h1>
                <p class="author-description">' . $description . '</p>
                <div class="author-social">
                <a href="https://twitter.com/' . $twitter .'" rel="nofollow" target="_blank">Twitter</a> | <a href="'. $facebook .'" rel="nofollow" target="_blank">Facebook</a>
                </div>
            </div>';
            ?>
        </div>
    </div> 
    #1086860
    24xstudio

    Thanks, man you are truely a champ! 🙂

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