How to Add Author Box In GeneratePress

GenratePress is a great free WordPress theme built performance keeping in the mind. It looks great, loads fast & has good amount of customization options. This is the reason I choose it for this blog. But while setting it up there is no option to add Author Box In GenratePress natively.

But I have seen a few blogs using GenratePress and having Author Box. So I asked Swadhin Bhai from DigitalGyd, How he added it to his blog. He pointed out me to GenratePress Forum. While digging out the forum I found out that Tom (Developer of GenratePress theme) cleared out that there is no native option to add an author box in GenratePress natively nor he has any plan to add such functionalities to the theme in future, as he thinks “ it’s better left as a plugin. It’s more content related than theme-related I think.” You can find the thread here

While I completely disagree with his opinion, I had no option except looking for some other solution for it. Again I am not going to use another plugin just for author box. But here comes hooks(Custom Layout) in Genratepress Pro to into rescue. You can add anything to the theme, like custom HTML, PHP snippet or Shortcode to anywhere you want.

Tom and his team have described how to add an author box in genratepress in 3-4 places in the support forum, again the problem was none of them was schema optimized or looked ugly. So took inspiration of them added schema and added some design changes to make it look good, here is the step how you can do it too.

How to add An Author Box with Gravatar in GeneratePress Pro

These steps will work only if you have GenratePress Pro, if you don’t have a Pro version of it, you should buy it! It’s worth every money 🙂 Or you can skip to here- “Add An Author Box in GeneratePress Free”.

Add A Hook Element

1. Go to appearance, then elements, then click on Add New

2. Then It will ask you to Choose Element Type, Select Hook from DropDown.

3. Give The Element an appropriate name, such as “Author Box” or something that you can find out it easily in the future. In my case, it is “Author Card”

4. Now paste the code below in the editor box.

<div class="author-box">
	<div class="avatar">
		<?php echo get_avatar( get_the_author_meta('user_email'), '96', '' ); ?>
	</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>

Special thanks to Daniel for providing PHP code to solve the blurry Gravatar.

5. Now in the settings below choose “after_content” in the hook options, check to execute PHP option (important) & give priority 10 or 20 depending upon if you have any other elements added to the hook.

6. Now go to “Display Rules”

7. In the Locations column select “posts” first then “all post “

8. That’s it we are done, now hit publish to make changes go live.

Adding CSS

There are multiple ways to add CSS to a WordPress site, you can add the CSS into WordPress’s inbuilt customizer’s Additional CSS tab or you can use a child theme to add CSS. In Genratepress forum the will suggest you use SImple CSS Plugin. My preferred method is to use a child theme, but the result will be the same no matter which way you opt for.

Enter the following CSS code and hit publish.

/* Author Box*/
.author-box {
padding: 3%;
    padding-bottom: 10px;
    background-color: #fff;
    border-radius: 7px;
    border-style: solid;
    border-width: 1px;
    border-bottom-width: 4px;
    border-color: #e6dfdf;
    margin-top: 60px;
    font-size: 0.9em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: initial;
    align-items: flex-start;
}
.author-box .avatar {
	height: auto;
	border-radius: 100%;
	margin-right: 30px;
	flex:1;
}
.author-info {
    flex: 4;
}
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: 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;
	}
	.author-description {
		margin-bottom: -1.1em;
	}
}

Now you can head over to your blog post to check out your new author box.

You can play with CSS code to change the look of your author box to match your website’s layout and color combination. Ideally, It should look like this!

You can verify your schema details going Google Structured Data Tool.

How to add An Author Bio Box in GeneratePress Free.

Sadly the method I wrote above won’t work if you don’t have a Premium version of GenratePress, so we have to depend upon an external plugin to achieve the same. There are lots of plugin for the same in WP Repo, but most of them are bolted and few ask for the premium version for such small thing. You can use any of them but I recommend using Social Pug: Author Box. It is very lightweight and does the most importantly does the job of adding an Author Box in GeneratePress free version.

Social Pug: Author Box

Don’t get fooled by its surprisingly low amount of installs. It is one of the best you can find wp repo in same category.

Setting up Social Pug: Author Box For GenerateaPress

Settings in the plugin is very simple and straight forward. To set it up go to Settings in the sidebar then Social Pug Author Box.

It asks about Author Avtar Shape, option to show or hide social media icons & shape of icons, which are pretty much self-explanatory. In the next step, it asks for where to display post, page or both. I opted for post only, you can choose it according to your needs!

This is how my setting looks like.

To add social media links to your profile, Go to users then your profile, now scroll down till you see – “Social Pug Author Box”. Then choose the social media links you want to display below your profile. Then hit “Update Profile”

You are done now!! Navigate to your blog and see what your new author box looks like.

It should look like this.

Conclusion

These are two ways using which you can add author bio box in Generatepress pro and free. If something doesn’t work or you face any problem add this to your site. Drop a comment below I will try my best to help you out.