[Support request] Align Author Page Content

[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 🙂

[24xstudio]

Please look into this ticket also 😀

[David]

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.

[24xstudio]

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

Please check the URL

[David]

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/

[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>';

[David]

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> 

[24xstudio]

Thanks, man you are truely a champ! 🙂

[David]

Glad to be of help

[Author]

Posts