Style Author

[John]

Hi

I want to style my author section in author page. How can I do this?

It can any good looking flat design style.

Thanks

[Leo]

Hi there,

We can’t really provide design suggestions here.

If you have a design or example in mind, we can try to point you in the right direction on how to achieve it.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[John]

Something like this https://www.authorityhacker.com/author/admin/

[Leo]

You will need to create a page hero for something like that and assign to the author page.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[John]

Created a page hero but there is right margin blank space.

And How can I get author bio?

[Leo]

You’ve added this CSS to move the entire page to the left:

.author, .page-hero-gravatar {
    display: inline-block;
}

You can create a shortcode for Author bio like this:

add_shortcode( 'author_bio', function() {
    ob_start();

    echo wp_kses( get_the_author_meta( 'description' ), null );

    return ob_get_clean();
} );

Then add [author_bio] in the header element.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[John]

I’ve made the change to

.author, .page-hero-gravatar {
    display: inherit;
}

It fixes the issue.

But how can I increase image size in author page?

And How to remove author image and bio from the content part?

[Leo]

I’m seeing this CSS added that’s setting the gravatar size:

.page-hero-gravatar img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: relative;
    vertical-align: middle;
    margin: 0 10px 0 0;
}

Try this CSS to remove the default header:

.archive.author .generate-columns-container .page-header {
    display: none;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[John]

Applied this CSS

.archive.author .generate-columns-container .page-header {
    display: none;
}

It’s just hiding from the frontend but still found when I checked page source.

It’s okay for readers but google bot still can treat as duplicate.

Is there any option to remove them instead “display none”?

[Leo]

Try this PHP snippet:

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

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[John]

Works Great, Thanks Leo

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Leo]

Hey John,

Sorry I actually made a mistake in the code above.

Can you use the edited instead?
https://generatepress.com/forums/topic/style-author/#post-1303780

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[John]

Thanks Leo, I’ve replaced the edited code

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts