Gravatar Image is not showing in Custom Author Box

[Ravi Dixit]

I have created an Author box using these codes.

Added a Hook at after_content:

<div class="author-box">
	<?php 
	
	global $post;
	
	$author_id = $post->post_author;
	
	?>
	
	<div class="avatar"><?php echo get_avatar( get_the_author_meta( $author_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>" title="Read more">
                ...
            </a>
 
        </div>
 
    </div>
 
</div>

and this CSS:

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

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

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

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

Everything is working fine except for Gravatar images of the author.

Please help me with this.

[Tom]

Hi there,

Instead of this:

<?php echo get_avatar( get_the_author_meta( $author_id )); ?>

Can you try this?:

<?php echo get_avatar( get_the_author_meta( 'ID' ) ); ?>

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Ravi Dixit]

Hi, Tom!

Thanks for this, It is working.

How can I create a border and change the background colour of the box?

May I ask you some off-topic questions?

Just curious to know about languages need to learn to create a WordPress theme and Plugins?

I inspired by you a lot after using GeneratePress from last 2 years.

[Tom]

Something like this should work:

.author-box {
    background-color: #efefef;
    border: 1px solid #dddddd;
}

Thank you! I would say PHP, CSS and Javascript are the best languages to dive into if you’re interested in WordPress development 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Ravi Dixit]

Thanks, A lot Tom!

I will definitely learn these languages.

[Tom]

Glad I could help 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts