[Massive BlackFriday Discount] GeneratePress LifeTime Deal, Cloudways, WP-Rocket, BunnyCDN! Claim Now

How to Add Author Box in GeneratePress Theme?

In this blog post, we are going to add Author Box in GeneratePress Theme. Learn how to implement author box info using a plugin or without plugin in WordPress website.

In this article, you will also learn

  • Why you need an Author Box on your website?
  • Add an Author Box in Free GeneratePress Theme.
  • Implement Author Box using a Plugin.
  • Show Author Bio with Gravatar.
  • Add an Author Box Info in GeneratePress Premium Theme without a plugin.
How to add Author Box in GeneratePress Theme

Moreover, Tom Usborne – The Founder and Lead Developer of GeneratePress Theme thinks the Author Bio Box is more of a content part rather than a theme part. By default, there is no author box in GeneratePress Theme.

Therefore, you need to add the author info box by yourself in your GeneratePress free or Premium Theme.

Why You Need Author Box on your Website?

The main reason why you need author box on your website is due to E-A-T signals.

E-A-T stands for Expertise, Authoritativeness, and Trustworthiness. E-A-T is a Search Quality Guidelines that are used by Google to improve its algorithm.

Expertise, Authoritativeness, and Trustworthiness

Since Author Bio is not a ranking factor but adding a biography on the posts page helps Google to determine the expertise of the writer and why the Author should be trusted.

So by adding Author Bio on your website helps to increase the Google’s Search Quality Guidelines signals. Therefore, you need to add it on GeneratePress Theme too using a plugin method or without a plugin method.

Also, read more about E-A-T and Quality Raters’ Guidelines explained in Whiteboard Friday by Marie Haynes on the Moz website.

Moreover, Author Bio helps readers to know about the person behind the content/website. It helps to increase the credibility of your blog since having bio make your site authentic.

Before Adding Author Box in WordPress

Before the author bio appears in the WordPress site, you need to know about Gravatar and Biographical Info.

Gravatar

Gravatar is a 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?

First, you need to create an account on the Gravatar website in order to complete profile.

Profile Picture Gravatar
  • Go to your WordPress Dashboard.
  • Visit the Users Menu.
  • Edit your User Profile.
  • Go to 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 About Yourself section, you need to write the Author Bio. It will appear on your site along with your profile picture. You can also link up your Social Media Profile using Anchor Tag in the Biography Section.

Biographical Info on WordPress Website
Screenshot: Dummy Author Bio

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

How to Add Author Box in Free GeneratePress Theme?

For Free GeneratePress Version, you need to use the plugin in order to get Author Box below the single post.

There are several Author Box plugins available on WordPress repository but we are listing a few of them. Some of the listed plugins are recommended in GeneratePress Support forum

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.

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.

2. Simple Author Box

Simple Author Box

Simple Author Box is another best plugin to try on your website. As states in the name, the plugin is simple to implement and where you can get the best out of the plugin. I have tried this plugin on my friend’s site and I am quite happy with this plugin.

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.

3. Social Pug: Author Box

Social Pug Author Box

Social Pug is another plugin to look after that helps to add simple responsive Author Box below posts and pages. Though the plugin has active installation over 800+ only but you can give a try in your blog.

The sad thing about Social Pug: Author Box plugin is that it hasn’t get updated from the last 4 years. So, don’t forget to test with the latest WordPress version and your theme itself.

4. Starbox – the Author Box for Humans

Starbox – the Author Box for Humans

While GeneratePress Premium clients are asking about Author Box, the customer support team recommends Starbox Author plugin. So, you can try the Starbox plugin in GeneratePress Theme.

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.

Furthermore, If you want to avoid the use of the above-listed plugins then you need to activate the Element Module to use Hook. But the Element module is only available on the Premium version. So, to get the author box without plugin follow the below method.

How to Add Author Box in GeneratePress Premium Theme?

To add an author box info in Premium Version of GP Theme, we are using the Hook Method i.e. without the use of the Author Box plugin. You need to do the following things.

  1. Activate the Element Module.
  2. Add New Elements. Go to Appearance > Elements > Add New Hook.
  3. Use the below PHP Code to add Author Box in GeneratePress Theme.
  4. Go to Appearance > Customize > Additional CSS.
  5. Add the following CSS Code to Style the Author Box.
Author Box in GeneratePress Premium Theme
Screenshot of Author Box using Hook Method

1. Activate the Element Module

We need to add Hook in GeneratePress in order to achieve the Author Info Box on our website. so, let’s activate the Element Module

Go to Appearance > GeneratePress > Elements > Activate

Activate Element Module in GeneratePress Theme

2. Add New Element Hook

Let’s add New Hook in Element. Go to Appearance > Elements > Add New Element

Adding a New Hook in GeneratePress

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

Copy and Paste the following Code

Here I am posting two different codes, use only one of them.

Code I:

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

Code II

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

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

Author Box in GeneratePress Hook Settings

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

Display Rules for Author Box GeneratePress

And Finally, Hit the Publish button.

3. Use CSS to Style the Author Box

Style the Author Box with CSS Code. You can change or tweak this code as necessary for your blog. The CSS code works both for desktop, tablet, and mobile devices.

CSS for Code I

.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 for Code II

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

I am using this method in my WPLogout blog and various other sites to add author box.

How to Add Author Box in GeneratePress Theme? - GeneratePress Tutorials | WP Logout
Author Box in GeneratePress Video Tutorial

Also Read: GeneratePress Review

Summary

At last, I would like to thank the GeneratePress Support forum, especially Tom Usborne and David for the necessary code. I have tweaked some code here in order to add Author Box in GeneratePress Theme.

By the above methods, you can add the author box in the free and premium version of GeneratePress Theme. For free users, you need to install an author box plugin.

If you use a premium version then I suggest going without a plugin ( Hook Method) to add the author info box. You can change/tweak the code as necessary.

If you have any comments or additional changes then please feel free to drop below.

Share:

GET 100+ FREE SEO TOOLS

Quickly access over 100+ popular SEO/Marketing tools to Boost your website traffic.

Thank you for subscribing. Check your Email(Didn't receive? check Spam Folder)

Something went wrong.

I am obsessed with WordPress and write articles about WordPress Speed Optimization, SEO, Blogging. I mostly publish tutorials on GeneratePress and GenerateBlocks.

49 thoughts on “How to Add Author Box in GeneratePress Theme?”

  1. Hey! Suraj,

    This article is really helpful for me. Would you please provide the CSS code which you use in your single post to create a shadow on the image?

    Reply
  2. Hey Suraj .
    I learnt from you lots off thing. Thank you so much for sharing awesome GeneratePress Tips and Tutorial.

    Reply
  3. Hey Suraj,
    That’s amazing. Can you share your author box CSS? it’s looking Dope.
    Also after adding Author box element a three-dot showing. How I can remove that.

    Reply
    • Hi Jim, Are you referring to the drop shadow CSS code?

      You can remove Author Box three-dot by removing author-links code in the last line

      Reply
      • Yes drop shadow CSS code, the image is showing the left side and author bio showing in the middle as like your author box CSS code.

        Can You able to share here?

        Reply
          • It’s working. Another problem, Author description & Author Name now showing like yours.

            Can your drop that CSS code?

          • You can inspect the code from your browser using ctrl + shift + I. Copy and use it.
            Thank you.

      • Hey, Suraj.
        Great work buddy, I really enjoyed your tutorials on GeneratePress. I implemented above steps and I got the box as shown in tutorial but I see three dots that takes me to author profile. ( see screenshot: upload.picpaste.me/image/eHbO2) Can you help me with that?

        By the way, can you make a tutorial on designing breadcrumbs same as yours?

        Thank you

        Reply
  4. Hi Suraj, great guide!

    1) How would I go about linking the author’s name to their author page and removing the three dots?

    2) How would I add social profiles and a website if filled in their user profile (ideally using icons and not text).

    3) How would I add a line break in the author bio so it’s not one big block of text? I tried but that didn’t seem to work.

    Thanks!

    Reply
      1. You can remove Author Box three-dot by removing author-links div in the last line of the above code
      2. I will update the tutorial soon.
      3. I think you can use br tag.
      Reply
  5. Thank you for this guide. I tried the similar steps earlier from one more website, but it did not work as expected.
    Your steps looked simple and straightforward. But still, the author bio is coming down the image not like in your this blog post (Your author box). I need the content right side of the image like you are showing here. Can you help me to get like your way?

    Reply
  6. hello suraj
    I have also same problem as mentioned above Stefan, not like your’s author displaying seem different unappropriate,
    how can i set it..

    Reply
  7. Hi Suraj,

    I followed your tutorial and it works. But how can I put the text right beside the logo? I know how to resize the logo, but if I make the logo larger, the text/description would only be pushed down.
    How can I make it float left or put the text right beside the logo?
    Not sure what’s he proper term for it though.

    Reply
    • Hi Jeff, Thank You for the comment. I have mentioned two methods in the tutorials. So, I think you need to play with CSS code to fulfill your requirements. I will look at it if I can do anything.
      Thanks

      Reply
    • Hi Carlos, can you please explain in detail?
      If you are using Code II then copy the CSS for Code II.
      That’s it.

      Thanks

      Reply
  8. Hey Suraj, Tried each and every step exactly as mentioned. But it somehow changes the layout. The Leave comment heading moves to sidebar and the widgets move down below the post comment button

    Reply
    • Hi Aditya, I have tested the code in the localhost again and it’s working perfectly fine.
      There are 2 Hook codes i.e. Code I and Code II and CSS for Code I and Code II.
      Did you mix Code I Hook and Code II CSS?
      Did you forget to select Execute PHP?

      I think you forget something. Please try again watching the video too.
      Thanks

      Reply
      • I followed all the steps exactly not one but 2 times over an interval of 15 days. Might be an error from my server side. I remember not mixing up hook and CSS.

        Reply
  9. Nice post brother, I have been surfing online more than 3 hours today, yet I never found any interesting article like yours. It is pretty worth enough for me. In my view, if all web owners and bloggers made good content as you did, the internet will be much more useful than ever before.
    There is certainly a lot to know about this issue.

    I love all of the points you’ve made. I am sure this post
    has touched all the internet viewers, its really really good post on building up new weblog.

    Reply
  10. I recently switched from Newspaper to GP and your tutorials have been a godsend, man. They’re incredibly helpful and insightful (and well-written, obviously). Keep doing what you’re doing!

    Reply
    • Hi Amulya,
      I am happy that you find my tutorials good. Indeed you make a great choice by migrating to the fastest WordPress Theme: GeneratePress
      If you need more help then always feel free to comment.
      Thanks

      Reply
  11. I am pleased with the design of your author box, however removing author-links div in the last line of the code did not remove the three dots from the Author Box. Any suggestions?

    Reply
    • Hi Michelle,
      I am using the same code and I have removed the whole DIV from the last line and it’s working fine.
      Can you please recheck it?
      Please let me know after doing this.
      Thanks

      Reply
  12. Hello Suraj,

    Here is what I have:

    .author-box {
    padding: 3%;
    padding-bottom: 2px;
    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: 160px;
    height: auto;
    border-radius: 100%;
    margin-right: 30px; padding-bottom: 8px
    }
    h5.author-title {
    margin-bottom: 0.1em;
    margin-top: -40px;
    font-weight: 600;
    }
    .author-description {
    line-height: 1.6em
    }

    @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-description {
    margin-bottom: -0.1em;
    }
    }

    Reply
  13. The author box looks great on the desktop and tablet, but on the mobile view, my name and picture move outside of the box. (Half of the photo is located outside of the top of the box and the lower half of the photo is below the top of the box.) My photo is in the middle of my name, obscuring it. The horizontal mobile view is fine. The vertical mobile profile is the problem.

    Reply

Leave a Comment