How to Add Author Box in GeneratePress Theme – BloggingQnA

are you also using generatepress theme for your blog, and weren’t able to add an author box?

If yes, Then you are on the very right page of the internet.

Today, In this post, I am going to teach you step by step How To Add Author Box In the GeneratePress theme.

GeneratePress is one of the most popular WordPress themes that is used by almost every popular blogger.

Having an author box in the blog post helps you in branding and it also makes your blog professional.

When I started using the generatepress theme the blog author box in not there. So I figured out to add it on my own.

And I am sure you also want to add this to your blog. So, without wasting time let’s get started with the step-by-step guide to adding the author box in the generatepress theme.

Why Do You Need an Author Box on Your Website?

According to me the author box makes your website looks professional and it tells the readers about the man behind the blog posts and websites.

We all know that these days google loves authority sites more than any random site. The author box is not a ranking factor but it will help you in building your authority in Google.

And more than this, people will get to know about the man behind the whole blog. The author box have many benefits. It also increases your blog’s authenticity and credibility.

---

Things To Do Before Adding Author Box in GeneratePress

Before adding the complete author box in the generatepress theme, you have to complete some steps so that you will get a perfect author box in your blog like mine.

You can check the below image of my author box.

You have to add your gravatar and Biographical Information in wordpress in order to get the best author box like above.

---

How To Add Gravatar in WordPress

Gravatar is the profile image that will shown in your author box for more authenticity and credibility. To enable Gravatar, you need to create an account on the Gravatar website in order to complete the profile.

here is the step-by-step guide to changing your Gravatar profile image.

You are done with the gravatar image. Now, its time to update your bio information that you can do from the wordpress user section.

Just head over to wordpress user section and and click on your website user name. There you will get a box like below image.

Update your bio info there. Check below image for the reference.

Now you are done with both profile image and bio information.

---

How to Add Author Box in GeneratePress Premium Theme?

Finally, its time to add author box in generatepress premium theme.

If you are using the free version of gp theme then you have on add the author box with the plugins.

Related:- GeneratePress Free vs Premium

To Add Author Box in GeneratePress Premium Theme we will be using the Hook Method, in which there is no need for any plugin.

Now follow the below step by step guide to add author box in generatepress premium theme.

STEP 1: Activate the Element Module

the first and most important thing is to activate the element mode of generatepress premium theme.

To do that, Go to Appearance > GeneratePress > Elements > Activate

STEP 2: Add new element hook

now you have to add an hook element in generatepress premium theme. Go to Appearance > Elements > Add New Element

STEP 3: Choose the Element Type as Hook. Give the Hook New Title as Author Box.

STEP 4: Now copy and paste the below code in the hook.

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

STEP 5: After pasting the above-given code scroll down below and Go to Hook Settings and choose Hook to show generate_after_content. Check the Execute PHP box. Assign the Priority to 20.

STEP 6: Again, Go to Display Rules and Choose the Location to display settings and select all singular. In exclude select the front page if you are using a custom home page.

Now hit the publish button.

STEP 7: Now its time to add CSS to Style the Author Box. This will make your author box more amazing and attractive.

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

.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: 450px;
	height: auto;
	border-radius: 100%;
	margin-right: 30px;
}
h5.author-title {
	margin-bottom: 0.1em;
	font-weight: 800;
}
.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;
	}
}

Click on publish button. And you are good to go.

You have successfully created the best author box in your generatepress theme.

If you want to make your site more stylish and more attractive then you can use custom CSS with Gp premium theme. I have created a complete list of custom CSS for it.

Click here for GeneratePress Theme Customization Using CSS.

---

Conclusion on How to Add Author Box in Generatepress Theme

So, above is the step by step guide for you guys to add your author box in generatepress theme without any plugin.

I hope this guide helped you. If you have any query then do ask me in comment section. Will try my best to respond them as soon as possible.

Please do share it with others. Your every share appreciates our efforts. 🙂 🙂