Author Box

Hi there,

This is code for the author box:

<div class="author-box">
	<?php 
	
	global $post;
	
	?>
	
	<div class="avatar"><?php echo get_avatar( get_the_author_meta( 'ID' )); ?></div>
 
        <h5 class="author-title"><?php printf( esc_attr__( 'About %s', 'the author' ), get_the_author_meta( 'display_name') );?></h5>
	
				<div class="author-summary">
	
        <p class="author-description"><?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?></p>
 
        <div class="author-links">
 
            <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" title="Read more">
                ...
            </a>
 
        </div>
 
    </div>
 
</div>

And you can add it using Hooks Element:
https://www.screencast.com/t/eYPxfn7nea

Do you provide CSS please? Like Volume author box.

And I have used this markup but It not showing my user gravatar image.

This is the CSS:

.author-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding: 4%;
    margin-top: 60px;
    font-size: 0.8em;
}

.author-links a {
    font-size: 3em;
    line-height: 0.5em;
    float: right;
}

.author-box .avatar {
    width: 30px;
    border-radius: 100%;
    margin-right: 20px;
}

h5.author-title {
    margin-bottom: 0.5em;
}

Great. Works fine.

But author summary in same line. How can I put in bottom on user image/name.

And Author title looks break/narrow.

I have edited the CSS above to force the description to wrap to a new line.

You rock David.

Solved my both issue.

Thanks a lot, for such awesome support.

Glad we could be of help

Hi Folks,

I am using the same script that you've provided, but i've made some edits that i want to share:

1. I've removed the link to the author, because in most cases when you are only 1 author and you use seo plugin, you will redirect this author link to home page, so there is no sense to have it.

2. I've changed :

<?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?></p>
TO
<?php echo nl2br( get_the_author_meta( 'description' ), null ); ?></p>

Because my author bio text was all in one line, looking very weird, so now it applies new lines in the text and looks nicer.

If you can check and confirm that all in the code is correct, so other people can use it in that way too :)
Thanks.

This is my modified code:

<div class="author-box">
	<?php 
	
	global $post;
	
	?>
	
	<div class="avatar"><?php echo get_avatar ( get_the_author_meta( 'ID' )); ?></div>
 
        <h5 class="author-title"><?php printf( esc_attr__( 'About %s', 'the author' ), get_the_author_meta( 'display_name') );?></h5>
	
				<div class="author-summary">
	
        <p class="author-description"><?php echo nl2br( get_the_author_meta( 'description' ), null ); ?></p>
 
    </div>
 
</div>

Also screen shot of where it is added its not available anymore. So i've added it to:
Elements->Hooks->Hook->after_content
Display Rules->Post->All Posts

Your provided Custom CSS is added to:
Appearance->Customize->Additional CSS

Looks good to me ! Thanks for sharing

I could not make any of the above code work as I wanted. My only resort was to use this plain CSS (customize > Additional CSS) and HTML code (in Elements).

And it's working for me now (one person blog).

.flex-container {
  display: flex;}
.flex-container > div {
  margin: 10px;
  padding: 20px;
}

This went inside Elements.

<big>about author</big>
<div class="flex-container">
  <div>my photo</div>
  <div> my description  </div>
 </div>

Thanks for sharing

Hi David,

I am new to WordPress and generatepress. And screen shot that you have added doesn't work. Can you please add some steps to implement this solution? It will be really helpful.

Thanks

Hi there,

1. Create a new Hook Element.
https://docs.generatepress.com/article/hooks-element-overview/

1.1 Add the code that Leo provides here to the Hooks Text area:

https://generatepress.com/forums/topic/author-box-4/#post-975518

1.2 Select the after_content hook from the hook list.
1.3 Check Execute PHP
1.4 Set Display Rules Location to Posts all Posts

2. Then in Customizer > Additional CSS add the code i provide here:
https://generatepress.com/forums/topic/author-box-4/#post-975612