How to Add an Author Box in GeneratePress Theme

In this blog post, I am going to show you how to add an Author Bio Box in your WordPress blog based on the Generatepress theme.

After, recent Google algorithm update, Google is giving more credibility to those websites which provide more  E-A-T signals. 

For those of you who don’t know about E-A-T 
It stands for Expertise. Authority. Trustworthiness. 

And according to the Search Engine Journal, the Author bio box is one of the effective ways to increase E-A-T signals of your blog and website. 

Before you dive deeper in this blog post, I want to invite you to join our community (Group) on Facebook, a group of friendly entrepreneurs who are ready to help each other Click here to join us.

So today in this blog post, I will show you how you can add Author Bio Box in GeneratePress without using a plugin and using a plugin. 

Add this author bio box in your blog post because it is all about your authority in front of google. 

How to add Author Bio Box in GeneratePress Without Plugin 

How to add a custom author box in generatepress
My website’s Author bio box

In this method, I am not going to use any plugin but at the same time, it is very easy to do. 
But this technique is only going to work if you have GeneratePress Pro Theme. 

Don’t worry if you are using the free version of generatepress then you can use the second method to add the Author bio box in your WordPress blog.

Here is Step by Step Process How to Add Author Box in GeneratePress Premium Theme…
1. Create a Hook, Go to Appearance > Elements > Hooks
2. Add the PHP codes given below to add the author box
3. Set display rule as after_content
4. Add CSS codes, Go to Appearance > Custom CSS
5. Copy and paste the CSS codes give below

So let’s begin

1. Create a hook 

To create a hook in your generatepress theme, Go to Appearance and click on Elements 

Now click on Add New Button to add a new hook 

Add Hook in elements of GP

From the dropdown select hook,
It will open a page to add codes

Select hook

Now, give a name to your author box and paste all the codes given below 

Add php codes in author bio box
<div class="author-box">
    <div class="avatar">
        <?php echo get_avatar( get_the_author_meta( 'ID' ) ); ?>
    </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">
                Read about me 
            </a>
        </div>
	</div>
</div>

2. Set Display Rules 

Here you will define where in the blog post your author box is going to display and which pages you want to display. 
So to do that, 

Under setting area,
Choose after_content in the hook section
After that, Check the box Execute PHP
And give the priority to 30 

settings of hook

You can also copy all the settings from the image. 

After you did all the steps
Now click on Display Rules 

And in the location 
Choose Post And All Post
You can add additional display rules if you want to display it on your pages also. 

Display rules of Author bio box

Now, click on the publish and you are good to go. Till here you have successfully added a hook to your blog, Now, It’s time to design our author bio box. 

3. Add CSS Style

There are two methods of adding CSS style in your generatepress blog, First one is to add the CSS codes into the additional CSS area in the customizer And the other one is to add a simple CSS plugin into your WordPress blog and add the CSS codes into the plugin.

In this tutorial, I am going to use the second method which is the most recommended method. So to start with this you need to install Simple Custom Css Plugin into your blog.

After you install that, hover over on the appearance and click on Custom CSS Now paste all the CSS codes given below to the blank field. 

.author-box {
	padding: 3%;
	padding-bottom: 10px;
	margin-top: 60px;
	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;
	border: 2px solid #a7a8a7;
	border-radius: 25px 0px 25px 0px;
	
}
.author-box .avatar {
	width: 400px;
	height: auto;
	border-radius: 100%; 
	margin-right: 30px;
}
h5.author-title {
	margin-bottom: 0.1em;
	font-weight: 600;
	font-size: 20px;
}
.author-description {
	line-height: 1.6em
}
.author-links a {
	font-size: 15px;
	line-height: 20px;
	float: left;
}
@media (max-width: 768px) {
	.author-box {
		padding: 20px;
		padding-bottom: 0px;
		margin-top: 100px;
		flex-direction: column;
		text-align: center;
	}
	.author-box .avatar {
		margin-right: 0;
		margin-bottom: 10px;
		width: 100%;
		margin-top: -35px;
	}
	.author-box .avatar img {
		max-width: 100px;
	}
	.author-links a {
		float: none;
		align-self: center;
	}
	.author-description {
	text-align: left;
}
}

And click on the update custom CSS button 

Adding extra css to author bio box

That’s it you have successfully added a stylish looking Author Bio Box into your blog without using any plugin.

How to Add an Author Bio Box Using a Plugin 

how to add author bio box in generatepress using a plugin

Here is the deal,
As I said to you earlier, the first method will only work if you have a pro plan of generatepress. But what if you don’t have a pro plan, Don’t worry by using this method you can easily add a responsive author box in your WordPress blog. 

To add an author box in your blog, we will be going to install a Plugin called Simple Author Box

There are lots of free and paid plugins available like fancier author box and starbox WordPress plugin but I like to use Simple Author Box,
it is a freemium tool, But I will recommend you to use the free version because it is little expensive.  

But instead, i will recommend you to use a paid plan of generatepress. 

So here is the step by step process 

#Step 1.  Go to plugins section from your WordPress dashboard and click on add new plugin Now in the search for the Simple Author Box.Then install and Activate the plugin

install simple author box in wordpress

#Step 2. It will add a new section to your WordPress navigation, or it will redirect to the setting page of the plugin.

#Step 3. In the settings section, check the setting you want to do or just copy all my settings. 

  • First, check the Open social icon links in a new tab 
  • Second Hide the author box on archives 
setting of simple author box plugin

#Step 3. When you are done with all the settings section, click on the Appearance Button Here you can design your author box as your preference. I am going to make a few changes. 

  • Author avatar image style to Circle 
  • Social icons type as colored 
  • Social icons style Circle 
  • Check Rotate effect on social icons hover 
appearance settings of simple author box plugin

You are good to go if you have designed the appearance of your author bio box. Or you can change the color and typography if you want to change it.  I will set it as default. 

#Step 4. In this step we are going to add social profiles to our author box, to do that 
Go to users section from your dashboard and click edit on your profile 

Now here you can add Biographical Info if you have not added  And at the bottom of the page, there will be a section called Social Media Links (Simple Author Box)

add social media profile

Here you can add social profiles as per your choice. In this tutorial, I have only added Twitter, Facebook, and LinkedIn profiles. 

Just add all the social links you want to display,  
And Save all the settings.

That’s it. You have successfully added an author bio box in your generatepress based WordPress blog. 

Conclusion: Both of the methods described in this blog post are super easy to do and both generate author schema to your blog post which is good for SEO purposes. Personally, I would like to use the first method, but it requires a pro plan of generatepress (it’s worth your investment.)
But tell me, which method you are using for your blog in the comments. 

Some of the links listed below are affiliate links, So in case you make a purchase any product from my link, I will get little commission from the companies but no extra cost to you.

How to add an author bio box in generatepress
a2hosting ad banner

14 thoughts on “How to Add an Author Box in GeneratePress Theme”

  1. Amazing technique brother, though currently I am not using any of the above method but I have pro generates so I am going to implement the first.
    Thanks for giving such an amazing techquine and hack.

    Reply
  2. Hi Bitu

    Great post.

    I was curious to add author box on my blog.

    As of now, I am using GeneratePress free version. So, I will give a try to the second method. Let’s see how it works.

    Anyways, thanks for the sharing

    Reply
  3. Hi Bitu

    This is very helpful post.

    I was curious to add author box on my blog.

    As of now, I am using studio press paid version. So, I will give a try to the second method. Let’s see how it works.

    thanks for the sharing

    Reply
  4. Hey,
    I think every blogger should use the GeneratePress theme.
    Amazing post, and thanks for sharing such valuable tips.
    Keep sharing such awesome posts.

    Cheers,
    Ashish

    Reply

Leave a Comment

13 Shares
13 Shares
Copy link