How to add author box in GeneratePress Theme (5+ Best Designs)

How To Add Author Box In GeneratePress Theme

In this article, we are going to learn how to add author box in GeneratePress Theme. I am going to cover both how to add author box without any plugin and also How to add author box using a plugin.

If you are using GeneratePress theme on your website and trying to find how to add author box below your articles and pages. You have arrived at the best website for that.

This article will not just cover how to add author box in GeneratePress Theme. I am also telling you how to add Author box in different styles to make them more attractive.

Note: I have shared custom CSS code for three different styles so make sure you read this article till the end to choose your desired design for your author box.

Are you excited to know more about it?

In this article you will learn

  • Why you need an author box on your website
  • How to add author box in GeneratePress theme free version
  • How to add author box in GeneratePress theme without a plugin
  • How to add author box using a plugin

In GeneratePress theme there is no default option to add author box but you can add author box using hook method and CSS code or by using some plugins.

If you are using the Premium version of GeneratePress theme there is no need to use any plugin to add author box but on the other hand if you are using the free version of generatePress theme then you need a plugin to add author box.

But don’t worry I will tell both how to add author box in the free version of the GeneratePress theme or the premium version of the GeneratePress theme.

Why you need an author box on your website

Author box makes your website professional and it helps blog readers to know about the person behind that article which they are reading.

As we all know, an authority website gets a higher ranking in SERP than any other website which doesn’t have authority.

The main reason behind using an author box on websites is the E-A-T signal.

E-A-T means Expertise, Authority, and Trust. E-A-T is a search engine guideline used by Google to improve search results quality.

The author box is not a direct ranking factor but it shows Google expertise of the author who is writing the blog post on your website. And it’s a positive signal towards E-A-T.

Read more about E-A-T on Ahrefs blog post What is E-A-T and why it’s important for SEO?

 Moreover, the author box helps to create a personal connection between blog reader and author. With the help of the author box reader knows about the person behind the blog post/website.

Before adding author box to your website

Before adding author box to your website you need to know about Gravatar and Biographical Info.

Gravatar

Gravatar is known as Globally Recognized Avatar. It is a part of WordPress which is maintained and supported by Automattic.

Using the Gravatar site you can create your profile by just signing up and uploading the photos. And Gravatar can be enabled in any WordPress site automatically.

How to Enable Gravatar in WordPress?

You need to create an account on the Gravatar website in order to complete your profile.

Gravatar-in-author-box
  • Go to your WordPress Dashboard.
  • Visit the Users Menu.
  • Edit your User Profile.
  • Go to the About Yourself section > Profile Picture.
  • Now Click on You can change your profile picture on Gravatar.
  • You will be redirected to the Gravatar website.
  • Sign in/Signup using WordPress.com credentials.
  • Authorize your WordPress account with Gravatar.
  • Now go to Add a New Image section.
  • Upload your picture.
  • Rate your Gravatar between G, PG, R, and X.
  • You’re done with the Gravatar profile.
  • Go back to About Yourself Section and you will be able to See your Profile Picture.

The profile picture appears while commenting on WordPress sites, Author Bio, WordPress forum. This one picture works for all your profiles.

Biographical Info

After working on Gravatar in the About Yourself section, you need to write the Author Bio. It will appear on your site along with your profile picture that you added on Gravatar website. You can also link up your Social Media Profile using Anchor Tag in the Biography Section.

bio-in-author-box-of-website

In certain cases, both the Gravatar and Bio are used by WordPress websites. In some cases, Author Bio Plugin helps to implement both Avatar and Author info.

How to add author box in GeneratePress theme Free Version

In the free GeneratePress theme you need to install a plugin to add author box to your website.

There are many author box plugins available to add author box to your websites Some of them are mentioned below that I used and recommend to all of you. Some of them are recommended in the GeneratePress forum as well.

  1. Simple Author Box
Simple-author-box

Simple Author Box is one of the best plugins to add an author box on your website. As states in the name, the plugin is very simple to implement and where you can get the best out of the plugin. I have tried this plugin on one of my sites and I am quite happy with this plugin. It displays the author’s name, author gravatar & description along with the social icons. It can be customized to match your theme design.

Moreover, the plugin is responsive and fully customizable in order to match your theme design. Also, you can add up to 30 social media profiles on your Author Bio Box.

  1. Fancier Author Box
Fancier Author Box

Fancier Author Box by ThematoSoup is a great plugin to look after if you are interested in integrating Author Bio on every post on your website or blog.

The plugin has active installation over 10,000 with 4.8 average ratings out of 5 stars. But the bad thing about this plugin is, it hasn’t been updated over the last 5 years. So be aware of compatibility issues.

  1. Starbox
Starbox-the-Author-Box

(Starbox) When GeneratePress clients are asking about Author Box, the customer support team recommends Starbox Author plugin. So, you can try the Starbox plugin in GeneratePress Theme if you are using the free version.

Starbox plugin supports Google Microformats vCard, customization of the author info for each Author, Social Media Profiles link for each Author, use your own Avatar than using Gravatar, etc.

  1. Molongui Author Box, Guest Authors & Co-Authors
Molongui Author Box

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 4000+ installations.

If you want to avoid the use of the above-listed plugins on your website to add author box then you need to activate the Element Module to use the Hook method. But the Element module is only available on the Premium version of GeneratePress theme.

So, to get the author box without a plugin first get the Premium version of GeneratePress theme from below button

After getting the premium version follow the below method.

How to add author box in GeneratePress theme Premium Version

In the free version of GeneratePress theme we use plugins to add author box in our website but if you are using premium version there is no need to use any plugin.

How to add author box in GeneratePress theme without a plugin?

To add author box in the premium version of GeneratePress theme I am going to use the hook method. i.e. without the use of the Author Box plugin. You need to do the following things.

Let’s dive into it,

Step 1. Active The Element Module

The First step is activate element module of GeneratePress premium theme.

To do this Go to Appearance > GeneratePress > Elements > Activate

add-author-box-in-generatepress-premium-theme

Step 2. Add New Element Hook

Now you need to add a new hook element in GeneratePress Premium Theme. To do this Go To Appearance > Elements > Add New Elements

add-author-box-in-wordpress-website

Choose the Element Type as Hook. Give the Hook New Title as Author Box. Copy and Paste the following Code

Note: Here I am posting Many different codes, use only one of them.

add-author-box-in-blog

Hook Code 1

add-author-box-in-generatepress-theme
<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>

Hook Code 2

add-author-box-without-social-button
<div class="author-box">
	<div class="avatar"><?php echo get_avatar( get_the_author_meta( 'ID' )); ?></div>
 
        <h5 class="author-title"><?php printf( esc_attr__( 'About %s', 'the author' ), get_the_author_meta( 'display_name') );?></h5>
	
	<div class="author-summary">
	
        <p class="author-description"><?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?></p>
 
        <div class="author-links">
 
        <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" title="Read more">...</a>
 
        </div>
 
    </div>
 
</div>

Hook Code 3

add-author-box-with-social-media-follow-button
<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="https://facebook.com/beakkisingh" target="_blank">Follow on Facebook</a>
<a class="twitter-author" title="Follow on Twitter" href="https://twitter.com/inakashsingh" target="_blank">Follow on Twitter</a>
</div>
</div>

Hook Code 4

author-box-generatepress-without-social-follow-button
<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>

Hook Code 5

Best-author-box-design
<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>

Go to Hook Settings and choose Hook to show after_content. Check the Execute PHP box. Assign the Priority to 20.

how-toadd-author-box-in-wordpress-blog

Again, Go to Display Rules and Choose the Location to display in Post > All Posts.

how-to-add-author-box-without-plugin

And Finally, Hit the Publish button.

Step 3. Add CSS code to style author box

This will make your author box more amazing and attractive. Style the Author Box with CSS Code. You can change or tweak these codes as necessary for your blog. The CSS code works both for desktop, tablet, and mobile devices.

Now go to appearance>> Customize>>Additional CSS and paste the below code to style your author box.

CSS Code For Hook 1

.author-box {
	padding: 3%;
	padding-bottom: 10px;
	margin-top: 30px;
	font-size: 0.9em;
	background-color: #fff;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
        box-shadow: 0 9px 28px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.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;
	}
}

CSS Code For Hook 2

.author-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 4%;
    margin-top: 30px;
    font-size: 1em;
    box-shadow: 0 9px 28px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

.author-links a {
    font-size: 3em;
    line-height: 0.5em;
    float: right;
}

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

.author-title {
   font-weight: 700;
}

h4.author-title {
    margin-bottom: 0.5em;
}

.author-description {
	margin-bottom: 10px;
}

/* For Mobile Devices */
@media (max-width: 768px) {
    .author-box {
        flex-direction: column;
        text-align: center;
	padding: 50px 10px;
    }

    .author-box .avatar {
        margin-right: 0;
        margin-bottom: 10px;
        width: 100%;
	margin-top: -35px;
    }

    .author-box .avatar img {
        max-width: 70px;
    }
}

CSS Code for Hook 3

.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;
}

CSS Code For Hook 4

.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;
}

CSS Code For Hook 5

.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;
}

How to add author box in GeneratePress theme video tutorial in hindi

Summary

This is it from my side By above methods, you can add an author box in the free and premium version of GeneratePress theme.

For the free version you need to install the author box plugin and if you are using the premium version of GeneratePress theme then I suggest going without plugin (Use hook method) to add author box.

I'm Akash Singh I am writing about blogging, SEO, Affiliate Marketing, and more to help beginners to grow their blogs and websites.

Join Lit Blogging Premium Facebook Group For Free

A group where you can learn everything about blogging, SEO and Affiliate Marketing without spending a single penny from your pocket.

2 thoughts on “How to add author box in GeneratePress Theme (5+ Best Designs)”

Leave a Comment

Join Our Exclusive Facebook Group

Join Lit Blogging Exclusive Facebook Group and Get Premium Support For Free.

*Get Support From 1000+ Bloggers*

Share via
Copy link