3 Different Ways Of Adding Author Box To GeneratePress Theme

Do you want to learn how to add Author box in GeneratePress theme easily without any plugin?

You have arrived at the right place!

As I use this lightweight theme, I can guide you in a better way to display your author bio in the GeneratePress WordPress theme, making it easier for you to implement the procedure.

If you are looking for a way to add an Author Box to WordPress single post layout and aren’t using the GeneratePress theme, I advise you to use this SEO-friendly theme to take your site design to a new level.

Look at the comparison GeneratePress free Vs premium to understand its exceptional theme features. Buy the premium copy of the theme to manually create the author box.

Note: I have provided custom CSS codes for three different author box designs, so read the post until the end and select your desired style.

Before delving into the topic, let me explain the importance of displaying the author’s biography in your WordPress blog posts.

Disclosure: We get a commission when you buy a product via our affiliate link at no additional cost.

Why Should You Add an Author Box In WordPress?

An Author box is simply a box at the top or bottom of the blog content containing biographical data about the site’s author. It pulls the image from the Gravatar account.

The WordPress user profile through the author bio section has the following benefits!

User experience and brand reputation are significant SEO factors. Ensure that you add your name, avatar, social profiles, email, and a short bio through the author box to the articles you write and make your work immediately recognizable.

Let’s see how to show author info in WordPress using the GeneratePress theme.

How To Add Author Box In GeneratePress Without Plugin?

Are you searching for the author box setting in the GeneratePress theme?

You must understand that it doesn’t offer the author box by default. However, you can include it through its premium feature called “Hooks.”

Let’s see how to do it!

Creating & Publishing Hook Element

Step 1: Create a hook element. For that visit, WordPress Dashboard > Appearance > Elements > Add New

Step 2: Select “Hook” from the dropdown list

Step 3: A window will open, and you will need to name the hook and add a set of code in the Editor box. (I have given the function code to be included)

Add the following codes

<div class="author-box">
<div class="author-box-avatar">
<?php echo get_avatar( get_the_author_meta('user_email'), '70', '' ); ?>
</div>
<div class="author-box-description">
<h5><span class="author-box-by">by</span> <?php the_author_link(); ?></h5>
<?php the_author_meta('description'); ?>
</div>
<div class="author-box-social">
<a class="facebook-author" title="Follow on Facebook" href="Enter Your Facebook URL" target="_blank">Follow on Facebook</a>
<a class="twitter-author" title="Follow on Twitter" href="Enter Your Twitter URL" target="_blank">Follow on Twitter</a>
</div>
</div>

Step 4: Next, we will set the display rules to define the location of the author box.

To do that, go to the “Settings” tab, choose “before-comments-container” and enable the option “Execute PHP.” You may set any number for the “Priority.”

Step 5: Under the “Display Rules” settings, pick the author box display locations. Select the posts where you want to add this feature, and you can also add exclusion rules.

You have now created the Author box using the Hook element in the GeneratePress theme.

Step 6: Before hitting the publish button, add the CSS code below for custom styling and make the author bio look polished.

Go to Appearance > Customize > Additional CSS > Add Codes > Publish

CSS Codes

.author-box{  
    background: #ffffff;
    padding: 40px;
    text-align:center;
}
.author-box-avatar img{
    border-radius:100%;
    border:5px solid #f1f1f1;
}
 
.author-box-description{
    background: #f9f9f9;
    padding: 20px;
    margin: 20px;
}
.author-box-description h5{
    text-transform: capitalize;
}
.facebook-author, .twitter-author{
    padding: 5px 10px;
    margin: 0 10px;
    color:#ffffff!important;
}
.facebook-author{
    background-color:#4267b2;
}
.twitter-author{
    background-color:#00acee;
}

Step 7: Click “Publish” the new Hook element. Now, visit a blog post and check how your author box looks.

If you have difficulty doing this procedure, email me at [email protected]

Author Box Without Social Follow Buttons

Do you expect a simple author box design without social media follow buttons, as you don’t want to route their audience elsewhere? And, how to customize author box with CSS in GeneratePress?

Implement the above-mentioned steps and use the following code to enable the author box on a single post without social follow buttons.

Function Hook Code

<div class="author-box">
<div class="author-box-avatar">
<?php echo get_avatar( get_the_author_meta('user_email'), '70', '' ); ?>
</div>
<div class="author-box-description">
<h5><span class="author-box-by">by</span> <?php the_author_link(); ?></h5>
<?php the_author_meta('description'); ?>
</div>
</div>

CSS Code

.author-box{  
    background: #ffffff;
    padding: 40px;
    text-align:center;
}
.author-box-avatar img{
    border-radius:100%;
    border:5px solid #f1f1f1;
}
 
.author-box-description{
    background: #f9f9f9;
    padding: 20px;
    margin: 20px;
}
.author-box-description h5{
    text-transform: capitalize;
}
.facebook-author, .twitter-author{
    padding: 5px 10px;
    margin: 0 10px;
    color:#ffffff!important;
}

Simple Author Box Design For GeneratePress

Sometimes, you may look for a simple design with a neat aspect that could catch more eyeballs to look at your author profile.

In that case, execute the above procedure to activate GeneratePress custom hook for author bio and use the following code to get the output like this!

Function Code

<div class="author-box">
<div class="author-box-avatar">
<?php echo get_avatar( get_the_author_meta('user_email'), '130', '' ); ?>
</div>
<div class="author-box-description">
<h5><span class="author-box-by">by</span> <?php the_author_link(); ?></h5>
<?php the_author_meta('description'); ?>
</div>
</div>

CSS Code

.author-box{  
    background: #ffffff;
    padding: 40px;
    overflow:hidden;
}
.author-box-avatar{
    float: left;
    margin: 0 20px 0 0;
}
.author-box-avatar img{
    border-radius:100%;
    border:5px solid #f1f1f1;
}
.author-box-description h5{
    font-size: 24px;
    margin-bottom: 10px;
    font-weight: bold;
    text-transform: capitalize;
}

Video Tutorial To Display Author Box In GeneratePress

If you can’t understand the settings explained in the screenshots, watch the video tutorial to show your author name and bio in the GeneratePress theme.

How To Show Author Box In GeneratePress Free Version?

If you are using the free version of the GeneratePress theme, it is not possible to add the author biography by using CSS codes because the “Hooks” feature is only available to paid users.

Therefore, you must rely exclusively on the third-party plugin.

I have a few author box WordPress plugin suggestions with many active installations and user reviews, so you can find a suitable one for your website.

1. Simple Author Box

If you want to add a responsive author box at the end of your WordPress blog article, then Simple Author Box is the right choice. It displays the author’s name, Gravatar, and description, along with social icons. It can be customized to match your theme design. This active author box plugin has 40 thousand installs right now!

Best Features

• Many WordPress theme customization options
• RTL & AMP support
• Manual insertion is possible on your template file
• Premium version with more features

2. Starbox

Are you looking to create an impressive author box in GeneratePress free version? Try the Startbox plugin that contains professionally built themes and landscaping. This add-on will increase your credibility, as you will receive notifications from your readers. It is often updated and has over 10,000 installations.

Best Features

• Is it possible to set the name and job of each author
• Easy to customize for every author
• Theme setup available for each author
• It can be added to content or widgets through the shortcodes
• Works smoothly with E-commerce plugins

3. Molongui Author Box

Molongui author box is an excellent extension with extensive customization preferences to create a responsive Author bio design. It has different layouts and flexible display options to choose from. To date, this plugin has 10,000 installations, with a substantial number of 5-star ratings.

Best Features

• Structured data to add Schema Markup
• Live Preview on WordPress Customizer
• Content selection options
• 90+ social icons to select
• Co-author & Guest author features

Wrapping Up

Which content would visitors take a look at first? With the author’s name or a post written by an anonymous person? I always prefer reading articles with the author’s name. Not only me, but also most of us, would like to read the content crafted by a person who mentions their name.

If you want to create a personal connection with the audience, adding the author box to the content is the perfect solution. Yes, it enables you to enhance user engagement on your WordPress site. It also showcases your expertise level.

Apart from your audience, you need to appear authoritative in the eyes of Google and other search engines to meet the EAT standard, which strengthens your online presence. Although the author bio is not a direct Google ranking factor, it sends a positive signal about your experience and expertise.

I hope you understand the advantages of adding a WordPress author bio and the various ways to integrate a custom author box into the GeneratePress theme. Like adding the author bio, you must enable “Last Updated Date” for GeneratePress theme to obtain the SEO benefits.

Now, please let me know which method you would like to use. With or Without a plugin? Share your thoughts in the comments section. Additionally, if you encounter difficulties to customize the author box with code, let me know, I’ll assist you in resolving the issue.