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.

How To Add Author Box In GeneratePress

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.

gravartar for wordpress

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

  • 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/sign up using credentials.
  • Authorize your WordPress account with Gravatar.
  • Now go to the 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 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

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

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

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

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

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

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

author box hook

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 class="author-info">
        <h5 class="author-title" itemprop="author" itemscope itemtype="">
            <span itemprop="name"><?php printf( get_the_author_meta( 'display_name') );?></span>
        <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>

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

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

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

Share on:

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.

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

  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

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

  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.

  4. Thank You So much Mangesh Brother For this Post. It really helps me to generate the Author box.

    You are doing a great job and I really admire your blog

  5. Thankyou, brdr
    Aapke iss post se muje bhut help mili author box lgane m…But mera ek question h jaise aapke author box m aapki social profile aa rhi h…. usse kaise add kr skta hu apne bio box m
    Please tell me.

  6. Thank You Mangesh Bro. Everytime I look for something you come with the same. This really helped me as I was struggling with codes and plugins to create that.

  7. Thank You, Mangesh Ji, hame itani achchi jaankari dene ke liye, maine apne blog par iase add kiya hai lekin other user ke smartphone mein ye update nahi show ho raha hai, jabki us browser mein jisme maine wordpress login kar rakha hai kewal usme dikh raha hai, iska kya reson hai… Please Help Us…


Leave a Comment