3 Different Ways Of Adding Author Box To GeneratePress Theme

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

You have arrived at the right place!

Well, as we are using this lightweight, superfast theme, I can guide you in a better way to show your author bio in the GeneratePress WordPress theme so that you can easily implement the procedure.

If you are looking for a way to add Author Box to WordPress and not using the GeneratePress theme, I would strongly advise you to get this SEO-friendly theme to perform well and surpass your competitors. Look at the comparison GeneratePress free Vs premium to understand its exceptional features.

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

Before getting into the topic, let me tell you the importance of displaying the author’s biography for your website or blog content.

Importance Of Adding Author Box In WordPress

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

Adding an author box to WordPress 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 do it!

How To Add Author Box In GeneratePress Without Plugin?

The GeneratePress theme doesn’t offer the author box by default. However, it can easily be added through its premium feature called “Hooks.” Let me tell you how to do it!

Creating & Publishing Hook Element

Step 1: You have to 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 up, and there you have to name the hook and add the piece of codes in the Editor box

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: Now, we are going to 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, you can pick the author box display locations. Select the posts where you want to add this feature, and you may add the exclusion rules as well.

Now you have made the Author box using Hook element in the GeneratePress theme.

Step 6: Before hitting the publish button, just add the below CSS code 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, call me at [email protected].

Author Box Without Social Follow Buttons

Some webmasters might expect a simple author box design without social media follow buttons as they don’t want to route their audience elsewhere.

If you fall under this category, implement the abovementioned steps and use the following codes to include the author box 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, you may execute the above procedure to create the GeneratePress hook element and use the following codes 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 For Adding Author Bio In GeneratePress

If you can’t understand the settings explained in the screenshots, watch the video tutorial to create an Author box in the GeneratePress theme.

How To Show Author Box In GeneratePress Free Version?

If you are using the free version of GeneratePress theme, then it is not possible to add the author biography by adding the CSS codes because the “Hooks” feature is available only for paid users. So, you have to rely exclusively on the third-party plugin.

Let me suggest a few author box WordPress plugins with many active installations and user reviews so that you may get a suitable one for your blog or 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, author gravatar & description along with the social icons. It can be customized to match your theme design. This active author box plugin has 40 thousand installs right now!

Best Features

2. Starbox

Are you looking to create an impressive author box in GeneratePress free version? Try Startbox plugin that contains professionally built themes and landscaping. No doubt, this add-on will increase your credibility as you will get notified by your readers. It often gets updated and has 10K+ installations.

Best Features

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. Till now, this plugin has 2000 installations with a good number of 5-star ratings.

Best Features

Wrapping Up

Which content would visitors take a look at first? With the author’s name or a post written by an anonymous? 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 mentioned his/her name.

If you want to create a personal connection with the audience, adding the author box to the content is the right solution. Yes, it lets you improve user engagement on your WordPress site. It showcases your expertise level as well.

Apart from your audience, you need to stay authoritative in the eyes of Google and other search engines to meet the EAT standard that strengthens your online presence. Even though the author bio is not a direct Google ranking factor, it would send a positive signal about your uprightness so that you can perform well on search engine page results.

I hope you understood the advantages of adding an author bio for your content and different ways to integrate author box to GeneratePress theme! Like adding the author bio, you must enable “Last Updated Date” for GeneratePress theme to obtain the SEO benefits.

Now, you tell me which method you would like to execute. With or Without a plugin? Share your thoughts in the comments section. Also, if you find it difficult to add the codes, let me know, and I’ll help you fix things quickly.