[Resolved] Customize author box

[Sebastian]

Hi! I want to add to my page an author box like the one you can find in this web site.

But, I want it to have padding, because the one of the example is to wide.

Thank you for your help!

[David]

Hi there,

does you site have an author box plugin installed ? If so send me a link so i can see the issue.

[Sebastian]

Hi, I don´t have a puglin installed, I thought it was possible to add the author box with coding.

[David]

This topic provides a code method:

https://generatepress.com/forums/topic/custom-author-box-in-the-sidebar/#post-1538602

Start there, and let us know how you get on.

[Sebastian]

I’ve already tried that method before I started this support topic and it is not the look I’m looking for, as you can see in the link I sent you. What I want is simpler just the picture on the center, the name of the author and the description; all this in a box with padding with a background color.

I’m so sorry if it is something super simple to you, but I have not any knowledge of coding.

[Ying]

Hi Sebastian,

If you are not familiar with coding, Block element with our plugin Generateblocks will make things easier.
https://wordpress.org/plugins/generateblocks/
https://docs.generatepress.com/article/block-element-overview/

1. After installing the plugin, go to Appearence > Elements, add a Block element.

2. Using Generateblcosk to create a structure like below screenshot. Set the whole container align center. You can play with the colors, typography, spacing to find the best fit for your site.
https://www.screencast.com/t/vFfgv50Tc

3. Choose Hook as block, choose generate_before_right_sidebar_content as block, choose location depends on which pages you want it to show.
https://www.screencast.com/t/fiQgyV9eb

Let me know how it works 🙂

[Sebastian]

Hi there Ying,

I have two questions before i do this, 1. If i do what you told me, can I assign each post to an specific author? 2. If I can, how can I do it? Because we are multiple authors in the website.

Thanks for your help

Cheers

[David]

It is possible to assign different authors but currently that requires some code.
It would be simpler to refine the HTML provided in the other article to this:

<div class="author-box">
    <div class="avatar"><?php echo get_avatar( get_the_author_meta( 'ID' )); ?></div>
    <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>
</div>

That will display just the avatar, author name ( with link ) and their bio.

Try that – and if you need the styling changing then share a link to the site and we can assist.

[Sebastian]

Thank you so much It worked pretty good.
Please can you help me with the styling? What should I do to improve it?

[David]

Try this CSS:

/* Add padding and background to box */
.author-box {
    padding: 40px;
    text-align: center;
    background-color: #f6f6f6;
}
/* Avatar Border Radius */
.author-box .avatar img {
    border-radius: 100%;
}
/* Style author title */
.author-box .author-title {
    font-weight: 900;
    margin-bottom: 0.5em
}
/* Remove space below description */
.author-box .author-description {
    margin-bottom: 0;
}

[Sebastian]

Thank you David! It worked perfectly!

[David]

Glad to be of help

[Sebastian]

Hi! Sorry to bother again, I’ve just realized that the author box is not looking good on mobile. To be specific, the author box isn’t showing the same styling on mobile. Please, is there something that I can do?

[David]

Can you share a link to where i can see the issue ?

[Sebastian]

Hi David, here you have the link.

[Author]

Posts