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

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

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

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

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

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;}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
14Shares