3 Different Ways Of Adding Author Box To GeneratePress Theme

add-author-box-in-generatepress

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 just looking for a way to add Author Box to WordPress and not using the GeneratePress theme, then I would strongly advise you to get this SEO-friendly theme to perform well and surpass your competitors.

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 that has some biographical data about the author of the site. It pulls the image from the Gravatar account.

Adding an author box to WordPress has the following benefits!

  • Do you know about Google EAT Algorithm? EAT – stands for Expertise, Authoritativeness, and Trustworthiness. Google evaluates your authority to offer high ranking in SERPs. Having a short bio at the end of the article would show your proficiency and knowledge in your niche.
  • It Introduces you as the content creator to the readers and thus increases your credibility.
  • It is possible to add internal/external links and social profiles to build trust and authority.
  • When your site has several authors, then it is easy for your visitors to distinguish their content.
  • It is a nice way to credit your writers and attract more guest authors to your site.

User experience and brand reputation are significant SEO factors. Ensure that you are adding your name, avatar, social profiles, email, and a short bio through the author box to the articles that 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

author-box-hook-generatepress

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.”

author-box-location-generatepress

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.

display-rules-author-box-gp

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-generatepress

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” of the new Hook element. Now, visit a blog post and check how your author box looks. If you feel any difficulty in doing this procedure, just catch me at sakthi6600@gmail.com.

add-author-bio-generatepress

Author Box Without Social Follow Buttons

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

If you fall under this category, just implement the same steps as explained above 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 in 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!

author-box-generatepress-theme

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 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 the paid users. So, you have to rely exclusively on the third-party plugin.

Let me suggest a few author box WordPress plugins with a good number of active installations and user reviews so that you may get the suitable one for your blog or website.

1. Simple Author Box

simple-author-box-generatepress

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

  • High customizations options
  • RTL & AMP support
  • Manual insertion is possible on your template file
  • Premium version with more features

2. Starbox

starbox-author-box-plugin

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 got 10K+ installations.

Best Features

  • 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 Ecommerce plugins

3. Molongui Author Box

molongui-author-box-generatepress

Molongui author box is an excellent extension that has 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 gets 2000 installations with a good 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
  • Premium version with powerful features

Wrapping Up

Which content would visitors take a look at first? With author name or a post written by 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, then 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 to 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 author bio for your content and different ways to integrate author box to GeneratePress theme! Like adding the author bio, you have to enable “Last Updated Date” for GeneratePress theme to obtain the SEO benefits.

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

by Sakthi
Sakthi is a thoughtful guy who specializes in WordPress Setup & Design. He is interested in designing the functional & attractive WordPress themes for the Digital marketers & Bloggers and helping them attain their goals with a tailored site. Look his ThemeForest Portfolio.

6 thoughts on “3 Different Ways Of Adding Author Box To GeneratePress Theme”

  1. Hello Nirmala,

    It’s an easy guide to add the author box in GeneratePress. Yes, It is true. Adding the author box increases the trust and personal connection. Also adding social buttons will be very helpful. So they can easily follow the author. Thanks a ton for dropping the CSS code.

    Reply
  2. Author box is super important when it comes to your personal branding and at time people like to get in touch with the author that is where they looks for links to connect. And you have provided a simple to solution to a problem that some people face when using GeneratePress.

    Thank you for sharing the solution

    Reply
  3. Nice post
    GenratePress is one of the best and free WordPress themes built performance and designed keeping in the mind. It looks awesome, loads fast & has an unlimited number of customization options. Thanks for sharing this informative post.

    Reply
  4. Generatepress lacks basic features. I don’t really like the theme but can’t change my decision now as I have already bought its premium version. Anyways thanks for the help.

    Reply

Leave a Comment