How to Add Author Box in GeneratePress Theme – BloggingQnA

are you also using generatepress theme for your blog, and didn’t able to add 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 GeneratePress theme.

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

Also Read: GeneratePress Review

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

When I started using 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 in your blog.

So, without wasting time let’s get started with the step by step guide of adding the author box in the generatepress theme.

Why You Need Author Box on your Website?

According to me 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. Author box have many benefits.

It also increase your blog 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 below image of my author box.

How To Add Author Box In GeneratePress
  • Save

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

How To Add Gravartar in WordPress

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

gravartar for wordpress
  • Save

here are the step by step guide to change your gravatar profile image.

  1. Go to your WordPress Dashboard.
  2. Visit the Users Menu.
  3. Edit your User Profile.
  4. Go to About Yourself section > Profile Picture.
  5. Now Click on You can change your profile picture on Gravatar.
  6. You will be redirected to the Gravatar website.
  7. Sign in/Signup using WordPress.com credentials.
  8. Authorize your WordPress account with Gravatar.
  9. Now go to Add a New Image section.
  10. Upload your picture.
  11. Rate your Gravatar between G, PG, R, and X.
  12. You’re done with the Gravatar profile.
  13. Go back to the About Yourself Section and you will be able to See your Profile Picture.

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.

bio information
  • Save

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

How to Add Author Box in GeneratePress Premium Theme?

how to add author box in gp premium theme
  • Save

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

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

Related:- GeneratePress Free vs Premium

Note:- These steps will work only with the GP premium theme. If you haven’t purchased it. Then click here to purchase it with the discount.

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

activate elements
  • Save

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

add hook element
  • Save

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

author box hook
  • Save

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.

hook setting
  • Save

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.

hook display setting
  • Save

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.

Conclusion

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

how to add author box in gp premium theme
  • Save

Hi, I'm Mangesh Kumar Bhardwaj, founder of BloggingQnA. A blog that provides authentic information regarding blogging, SEO, affiliate marketing, and how to Earn Money Online with blogging.

8 thoughts on “How to Add Author Box in GeneratePress Theme – BloggingQnA”

  1. Hello Mangesh.

    Your post is really helpful. I am a blogger too.
    I have question: how can i add author pic and name right below the blog post?

    You are not doing that. But if you ever visited masterblogging.com on which ankit singla is doing the same. he is using his pic and name right below all blog posts.

    Can you help me?

    waiting for reply.

    Reply
  2. Hello Mangesh Bhai, I am Big Fan Of yours and i have a Question.
    I install Thrive Architect on My website but the Global Elements ( Header & Footer ) are not Working .

    So Please Suggest Me the Solutuion and I saw your Video On Youtube How to Customize But that don’t Work So What i Do

    Reply
    • hello Ramkrishna

      I am using the theme footer and header on my website. If you want to add a thrive header and footer on your website. Then I guess you have to create 1 head and footer and then you have to add that on every page of your blog.

      Reply
  3. I have generate press premium and i had done the basic customisation by watching your youtube videos. I also added the css you have provided. This is what exactly I was looking for. Thank you for such an amazing explanation.

    plus few minutes back I was asking for css for shadow effects and border around individual images( with that i can add border where its needed only) in the bloggingqna telegram group.
    I think no one knows the answer.

    Please if possible can you provide that css, you can write an article about that because i don’t know anything about coding and I didn’t find it anywhere on web. Everywhere it is so complicated that i couldn’t understand how to add that css.

    Please do the honour of writing an article about much needed css for bloggers.

    Reply

Leave a Comment

9 Shares
9 Shares
Share via
Copy link
Powered by Social Snap