How to Add Author Box in GeneratePress Theme

In this article, we’ll learn how to add author box in Generatepress theme easily without using any plugging.

An author box provides information about the author who had written that post. It indicates the brand value and improves the user engagement of that website. 

In this article, we are going to implement this feature on Generatepress, a lightweight and SEO-friendly WordPress theme. Generatepress has an awesome feature called Hook functionality that helps to create any additional functionality without using any third-party plugin.

Here is the recommended review of Generatepress theme in 2022, you can consider Generatepress as your blogging theme. 

What is an Author Box and Why adding an Author box on a website is very important in 2022?

An Author box contains a short and brief introduction about the author/writer. This information gives credibility to the readers and they are easily engaged with the article. 

A quick and simple tips to write an author bio:

  • Keep it brief.
  • Start with a one-liner.
  • Add your achievements.
  • Use third-person voice.
  • Use a professional profile photo.

Now, let’s talk about does it really matter to add an author box on a website in 2022? 

– The answer is ‘Yes!’ 

Here are the reasons:

  • Create a good connection between author and reader.
  • Drive traffic because a reader always loves to read their favorite author’s article.
  • Increases chance to get collaboration.

Now, let’s dive into the step for adding an author box on any Generatepress website.

Steps to add author box in Generatepress WordPress theme easily!

Author Box Layout in Generatepress theme
Author Box Layout in Generatepress Theme

You’ll need an avatar to display your profile picture. In general, WordPress does not have any option to upload a profile picture in your profile. But there are a couple of plugins that can help you to upload a profile picture in your profile. 

But, there is a simple hack to upload your profile in your profile using Gravatar account associated with WordPress.

How to use and enable Gravatar on your WordPress website

Profile Picture Gravatar
  • Login to your WordPress admin followed by
  • Navigate to user > your profile.
  • Go to About Yourself section and scroll to Profile Picture section.
  • Click on You can change your profile picture on Gravatar.
  • You’ll be navigated to Gravatar website.
  • Log in with your WordPress credential. If you don’t have an account, you can create one by clicking on the Sign up button.
  • Authorize your website.
  • Now go to Add your image section and upload your image.
  • And you’re done with your profile picture.

Now, it is time to add a perfect introduction about you in the Biographical Info under About Yourself section.

In that information, you can use an HTML anchor tag for your social media profile link. Something like this…

Biographical Info

Creating author box using GeneratePress Hook and CSS

You’ll need a Generatepress premium plugin to use this hook functionality. Here is a link your can get Generatepress premium with an Offer price.

After installing GP Premium on your website. Navigate to Appearance > GeneratePress > Dashboard to activate element section on Generatepress.

Activate Elements in GeneratePress theme
Activate Elements in GeneratePress theme

Create a Hook element for the Author box

Step 1: Go to WordPress Dashboard > Appearance > Elements and click on the Add New button.

adding new element in hook
Add New Element

Step 2: Select Hook option from dropdown item.

select hook type
Choose Hook on Generatepress

Step 3: Give a suitable name like: ‘Simple Author Box’ and put the below code on the editor box.

Simple Author Box using Hook
Simple Author Box using Hook
<div class="author-box">
    <div class="avatar">
        <?php echo get_avatar( get_the_author_meta( 'ID' ), 250 ); ?>
    <div class="author-info">
        <h5 class="author-title" itemprop="author" itemscope itemtype="">
            <span itemprop="name"><?php printf( get_the_author_meta( 'display_name') );?></span>
        <div class="author-summary">
            <p class="author-description"><?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?></p></div>
<div class="author-links">
            <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" title="Read more">...</a>

Step 4: Now, Scroll down and select Setting tab, choose hook generate_before_comment_container, select execute PHP, set priority as 10.

Select Settings in Hook

Step 5: Move to Display Rule, choose Post – All post on Location. 

Post option in Hook

Add CSS to customize author box

You can add CSS by navigating dashboard > appearance > customize and going to additional CSS section.

Now, copy the below code and paste this on additional CSS. 

/** author Bio */ 

.author-box { 
padding: 3%; 
padding-bottom: 10px; 
margin-top: 30px; 
font-size: 1em; 
background-color: #fff; 
display: -webkit-box; 
display: -ms-flexbox; 
display: flex; 
-webkit-box-align: center; 
-ms-flex-align: center; 
align-items: center; 

.author-box .avatar {
width: 250px;
height: auto;
border-radius: 100%;
margin-right: 30px;
} {
margin-bottom: 0.1em;
font-weight: 600;

.author-description {
line-height: 1.6em

.author-links a {
margin-top: -1.5em;
font-size: 2em;
line-height: 2em;
float: left;

@media (max-width: 768px) {
.author-box {
padding: 20px;
padding-bottom: 25px;
margin-top: 60px;
flex-direction: column;
text-align: center;
.author-box .avatar {
margin-right: 0;
width: 100%;
margin-top: -25px;
.author-box .avatar img {
max-width: 100px;
.author-links a {
float: none;
align-self: center;
.author-description {
margin-bottom: -0.1em;

You can customize on your own if you want to know about CSS.

After doing all of the above changes, your final layout should be looking like this.

Author Box Layout in Generatepress theme
Author Box Layout in Generatepress Theme

How to Add Author Box in Generatepress free theme or any WordPress theme using a Plugin

Generatepress free theme has no option to create hook elements and customize any additional feature. 

If you are not a GP premium user, or you are using Generatepress free theme and you want to add an author box in your post, you can use Simple Author Box Plugin, a Free and mostly used author box plugin.

simple author box

Simple Author Box plugin offers some interesting features that can be easily implemented on your website without any coding knowledge:

  • It has multiple layouts to display as an author box.
  • Upload profile picture without a gravatar account.
  • Add social media links to display social media profiles in the author’s section.

To activate Simple author box plugin getting from WordPress repository, 

Step 1: go to Dashboard > Plugin > Add New Plugin and search for Simple author box

Step 2: Install and Activate that Simple Author Box plugin.


Step 1: Download Simple Author Box in .zip file and go to Dashboard > Plugin > Add New Plugin and click on Upload Plugin.

Step 2: After uploading the plugin, you need to Activate the plugin.

And you modify your account according to your choice.

Suggested Article:
-->  How to Change WordPress Default Login Logo [Without/With Plugin]
-->  How to Add Reading Progress Bar in Generatepress Theme without using Plugin

Wrapping up

Now, you can easily create your author box on the Generatepress theme. Even if you don’t have a Generatepress premium theme, you can use a plugin to create an author box. 

I will not recommend you to use a plugin. But, you can use a plugin to add some more customization and a user-friendly layout. However, it may decrease the website page speed. 

So, it is your turn, how to configure the author box on your website. 

Remember! You must have an author box to have a good connection with your reader.

All the best on your journey!

I am Somnath an Entrepreneur, Blogger and Proud to be Founder of I love to share blogging tips, WordPress guidance to my audience. I'll happy if you get some helpful article from my blog.

Leave a Comment