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:

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:

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!

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

• Login to your WordPress admin followed by www.domain.com/wp-admin
• 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…

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.

Create a Hook element for the Author box

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

Step 2: Select Hook option from dropdown item.

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

<div class="author-box">
    <div class="avatar">
        <?php echo get_avatar( get_the_author_meta( 'ID' ), 250 ); ?>
    </div>
    <div class="author-info">
        <h5 class="author-title" itemprop="author" itemscope itemtype="http://schema.org/Person">
            <span itemprop="name"><?php printf( get_the_author_meta( 'display_name') );?></span>
        </h5>
        <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>
       </div>
    </div>
</div>

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

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

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; 
border-radius:2px; 
-webkit-box-align: center; 
-ms-flex-align: center; 
align-items: center; 
}

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

h5.author-title {
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.

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 plugin offers some interesting features that can be easily implemented on your website without any coding knowledge:

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.

OR

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!