Get 10% Discount On GeneratePress Premium Theme Avail Now

How to Add Author Box in GeneratePress Theme 2020?

Let’s add author box in GeneratePress theme.In this post you will learn easy and best way to display author box in generatepress theme with and without plugin.

  • Save
How To Add author Box In GeneratePress

I am using generatepress premium theme one of the superfast and lightweight themes.

Read : GeneratePress Review-Best And Lightweight Theme

The best thing about this theme is, you can easily customize it and make your site more professional and awesome looking.

In order to add author box in GeneratePress theme, you need to use some CSS and coding which I will share in the later part of this article.

For this, you have to buy Generatepress Premium plugin to implement author box easily.

Why To Add Author Box

An author box is a box at the bottom of the blog content showing the writer’s avatar, with some of his/her biographical data and social links.

As you know, people visiting your site, want to know who has written this article.

And to make your blog content recognizable among your readers and search engines, you must add author box to your site.

Moreover, if your site has multiple authors, adding author box will help to distinguish them in an easy way.

From SEO point of view, it is always better to display author box in your website.

Before Adding Author Box, First Add Gravatar

  • Save

Gravatar is a recognizable picture of your choice, which is globally recognisable across all website platforms.

This single Avatar will show on your author box, commenting , in the forms websites etc.

For this you will have to sign up on Gravatar website and choose your desired picture.

Simple Steps :

  1. Log in to your WordPress Dashboard.
  2. Go to Users Menu.
  3. Click on User Profile.
  4. Go to About Yourself section write some biographical information about yourself.
  5. Now click the link below the profile Picture
  6. You will be redirected to the Gravatar website.
  7. Sign in/Signup using WordPress.com credentials.
  8. Upload your picture.
  9. And that’s it.
  10. Again visit your profile picture section, you will be able to See your Profile Picture.

How To Add Author Box In GeneratePress Without Plugin?

GeneratePress theme is freemium theme.Its free version have limited features.

So you can’t add author box in GeneratePress theme in its free version without plugin.

So you have to buy it’s premium version that offers 14 modules with the help of these, you can customize your site very easily.

Buy Premium Version Of GeneratePress Theme and get 10% discount

By default, GeneratePress theme doesn’t offer the author box.

So I have provided you some PHP code, and CSS, which you can apply in the “hooks” element and additional CSS feature of GeneratePress premium theme.

Make sure, you activate all modules of GeneratePress theme.

Go to Appearance > GeneratePress > Check All Modules To Activate

GenetatePress theme modules
  • Save

Step -1 (Adding PHP Code)

Firstly, go to Appearance > Elements > Choose HOOK from drop down menu > Create.

Now Give a suitable title to the new Hook.

I have given the Title Author Box.

  • Save

Next copy the below code and paste in the editor box.

  • Save

Copy the code :

<div class="author-box">
    <div class="avatar">
        <?php echo get_avatar( get_the_author_meta( 'ID' ) ); ?>
    </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="Your About Us URL"
                > Read More
          </a>
        </div>
	</div>
</div>

Note : In the above code, under (<div>class) “author links”, add your website’s “About Us” URL.


Below the editor, you will see 4 options under setting option :

  1. Hook
  2. Execute short codes
  3. Execute PHP
  4. Priority
  • Under Hook, choose before_comments_container from the drop down menu.
  • Uncheck the box under Execute short codes
  • Check the box Under Execute PHP
  • Finally, under priority put 10
  • Save

Step -2 (Adding Display Rules)

Now we will add location rules under option Display rules.

Leave all the options as it is.

  • Save

Note: You can also add exclude rules.It means that you can exclude Author Box from showing to the certain parts of your site.

Recommended :How To Display Last Updated Date In GeneratePress 

Step-3 (Styling Author Box)

Now in order to show author box in styled manner, we need to add CSS to the above code provided in step number 1.

To add CSS, we can use two methods.One is additional CSS option available in GeneratePress premium.

And second is to use Simple CSS Plugin to add CSS.It is best plugin because Styles created with this plugin will render even if the theme is changed.

We will use in-built additional CSS option to add CSS to style the Author box.

Steps To Add CSS

Go to Appearance > Customize >Additional CSS.

.author-box {
	padding: 3%;
	padding-bottom: 10px;
	margin-top: 60px;
	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;
	border-radius: 0px 25px 0px 25px;
		box-shadow: rgba(23,43,99,.4) 0 7px 28px!important;
		border-left: 2px solid #115cfa;
	  border-right: 2px solid #115cfa;
	border-top: 2px solid #115cfa;
		border-bottom: 2px solid #115cfa;
    
	
}
.author-box .avatar {
	width: 250px;
	height: auto;
	border-radius: 100%; 
	margin-right: 30px;
}
h5.author-title {
	margin-bottom: 0.1em;
	font-weight: 600;
	font-size: 20px;
}
.author-description {
	line-height: 1.6em
}
.author-links a {
	font-size: 15px;
	line-height: 20px;
	float: left;
	color: #115cfa;
	
	
}
@media (max-width: 768px) {
	.author-box {
		padding: 20px;
		padding-bottom: 0px;
		margin-top: 100px;
		flex-direction: column;
		text-align: center;
	}
	.author-box .avatar {
		margin-right: 0;
		margin-bottom: 10px;
		width: 100%;
		margin-top: -35px;
	}
	.author-box .avatar img {
		max-width: 100px;
	}
	.author-links a {
		float: none;
		align-self: center;
		line-height: 20px;
	}
	.author-description {
	text-align: left;
}
}

Now copy the above provided code and paste in the additional CSS area.

  • Save

Final Result:

  • Save

How To Add Author Box In GeneratePress With Plugin

Now we will add author box in GeneratePress using a free plugin.

As mentioned earlier, if you are using free version of GeneratePress theme, you need a plugin to add author box in your website.

There are many free and paid WordPress plugins available to display author box in your site.

We will use Simple Author Box, a freemium plugin.

  • Save

Let’s get started…

Step #1

Go to Plugins > Add New

Here search for Simple Author Box.Install and activate the plugin.

Step #2

Now hover to Simple Author > settings Section of Simple Author Box plugin.

  • Save

Under settings, you will see 6 options to customize the author box as shown in the screenshot :

  • Save

You need to switch on those options that you like.

In my case, I have kept 4th option on.

Note: The fourth option will work only, if you add social links by going :

Users > Your Profile > Add Social Links One by one.

You can use multiple social media links.I have added two links.

  • Save

Step #3

Next, click on Appearance option under author box.

Here, I have kept all options unchanged except, Author Avatar image style to be circle.

  • Save

Step #4

Now, next option is “colours” options.

Under colours option, you can customize the author name colour, Border colour, background course of social icon bar, Background course of author box, social icons etc.

In my case, I have choose default colours.

  • Save

Step #5

Next option is typography.

Here you can select any font family for author name and description.

Besides, it you can increase and decrease font sizes, social icons sizes etc.

  • Save

I have kept default options.

Save all settings.

So finally, we have added a beautiful author box in GeneratePress with plugin.

  • Save

Also Read : Host Google Fonts locally in WordPress to increase website speed

Wrapping Up

So, you have learnt two tricks to add author box in generatepress with and without plugin.

In my personal opinion, first method is far better, because if you really want to take your site to next level.

You must use GeneratePress Premium Theme.And by using it you can add Author box without any plugin.

And if you have a tight budget, then use only Simple Author Box Plugin.

Add author Box
  • Save

I am Kuldeep Singh a teacher by profession and blogger by great passion. You can learn here blogging related tips and tricks.

Leave a Comment

Share via
Copy link