iThemes site-wide discount! 40% OFF Grab this offer!

How to Add Profile Image To Meta Section In GeneratePress Theme?

Are you looking for an easy guide on how to add your profile image or author image to the entry meta section of your GeneratePress WordPress theme? In this blog post, I will share an easy guide with you to the aim of this blog post title.

Before going to the guide, you may ask a question can I apply this guide to Astra or any other popular WordPress themes?

The right answer is no, you can only use the guide for GeneratePress theme.

WordPress Profile Image

What Is GeneratePress?

GeneratePress is a popular and best-rated lightweight WordPress theme. The theme is perfect for building any type of website, even compatible with any WordPress page builder.  That is why currently, I am using this theme here at WP Basic Pro. 

So I will recommend you if you plan to start blogging or want to make a WordPress site, you can go with the GeneratePress theme other than the Astra theme is recommended. 

Well, back to the guide.

How To Add Author Image to Entry Meta Section?

Adding a profile picture/author image in the homepage entry meta section or single page/post meta section is easy if you use the GeneratePress theme. 

But before going to add a picture in the meta section, you should use a child theme of your parent theme. For the GenereatePress theme, you can download a child theme from their official website other than you can use my guide on how to create a WordPress child theme.

However, after adding a child theme, go to the WordPress dashboard> Appearance> Theme Editor and click on the funcation.php

WordPress Theme Editor

Now copy the below code and paste it into the funcation.php file and finally click on the update file button. In this part, you are done.

add_filter( 'generate_post_author_output', function( $output ) {
     $avatar = get_avatar( get_the_author_meta( 'ID' ) );
 if ( $avatar ) {     return $avatar . $output; } return $output;
 } );

The next step is to add some CSS codes to your theme’s CSS file. Adding custom CSS in GeneratePress is also easy.

How to Add Profile Image To Meta Section In GeneratePress Theme? 1

Just simply navigate to the Appearance>Customize then go to the Additional CSS section and enter the below code and finally click on the ‘PUBLISH‘ button.

.entry-meta .avatar {
     width: 25px;
     border-radius: 50%;
     vertical-align: middle;
     margin: 0 5px;
 }

You are done.

Note: you can change the size of your author profile picture by customizing the above codes if you have little knowledge about CSS. Otherwise, you can use the code without any changes because I have added the above code in this post as standard.

How to Add Author Avatar/Profile Picture?

This is a bonus guide for you if you do not know how to add an author profile picture. Just simply go to the WordPress Plugin>Add New and install a plugin called WP User Avatar.  But if you do not use any plugin to add an author image, you can follow my other guide on how to add a profile picture to a WordPress site. I hope this beginner guide helps you to add an author photo easily.

WP User Avatar

Lastly, if you have any questions regarding this post or face any problem while adding code to your theme, you can freely comment below. I will try to reply as soon as possible. Do not forget to share this post with your friends and colleagues if it is really helpful.

Previous

8 Best WordPress File Upload Plugins (Compared)

5 Best WooCommerce UPS Plugins (Compered): Best For Shipping Rates & Label Printing

Next

A team of WordPress experts that always ready to share WordPress related tips, tricks, plugins, and themes review, and more.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.