How to Add an Author Box In GeneratePress?

GeneratePress is a popular freemium WordPress theme. But it has no default author box that is a disadvantage of the GeneratePress theme and worry for beginner users. But it’s not a big matter, because today I’ll guide you how to add an author box in GeneratePress theme?

Applying this GeneratePress author box guide on your site, you never need to add any author box WordPress plugin means the entire process is manual. 

Read: How to Customize Post Navigation In GeneratePress Theme?

Why Is This A Robust Guide?

A few days ago, I searched online for a guide on how I can add an author box on my GeneratePress website. But unfortunately, I can’t find any proper guide that fulfills my entire expectation.

From my previous coding experience and some resources from online, finally, I’ve added an author box on my blog here at WP BASIC PRO. See the below screenshot.

However, other guides you’ll find online about author boxes are not good for a professional author box design in GeneratePress that I think. So I hope my guide will be helpful for you.

Besides, in this guide, I’ll share the default code that you’ll not have to change to show the author box on your site.

But if you want to change any specific CSS part of your author box, you can do that from the customize CSS section.

What Codes I’ll use?

• I’ll use PHP code snippets in the GeneratePress hook section, which is under the GeneratePress Elements. 
• I’ll use CSS code in the Additional CSS section, which is under the WordPress appearance menu.

Add Author Box Using a WordPress Plugin

Adding an attractive author box in GeneratePress is super easy if you use a plugin. The best author box plugin is the Simple Author box developed by WebFactory Ltd. 

But I personally don’t like to use plugins if I have an opportunity to apply manual processes. So my advice is to avoid using so many plugins on your WordPress site.

Now let’s start to the step-by-step guides.

How to Add an Author Box In GeneratePress?

This guide will not work in the GeneratePress free version. So if you don’t buy its premium version till now, go to GeneratePress and buy it with 10% off. 

After uploading and activating the GeneratePress premium version on your site, now go to WordPress ‘Appearance’ Menu and Click on the ‘Elements’.

Now create a new hook.

Enter the name of your hook in the Add title field. Then enter the below codes in the code snippet box.

<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">More »</a>
	       </div>
				
    </div>
</div>

Now change the hook name default to generate_after_content then tick mark on Execute PHP.

Next step: click on the ‘Display Rules’ then choose your location. Select ‘post’ from the drop-down menu.

Finally ‘Publish’ the custom hook.

Next step: Go to the theme Customize section, which is under the WordPress Appearance menu.

Then click on the ‘Additional CSS’ and enter the below CSS codes.

/* Start Author Box CSS */
.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;
	border:1px solid #ededed
}
.author-box .avatar {
	width: 250px;
	height: auto;
	margin-right: 10px;
}
h5.author-title {
	margin-bottom: 0.1em;
	font-weight: 800;
	font-size:22px
}
.author-description {
	line-height: 1.5em
}
.author-links a {
	margin-top: -30px;
	font-size: 16px;
	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;
	}
}
/* End Author Box CSS */

Finally click on ‘Publish‘ button of Customizer.

Now your all steps are done. Enjoy a professional author box in your WordPress site.

If you want to change CSS or add any section in your author box, you have to apply code to CSS or PHP section. 

However, for adding a background of your author box, you can add the below code in the CSS section.

First delete the default code from CSS .author-box

border:1px solid #ededed

Then add the below code

background:#ededed

For customizing GeneratePress author box or adding more CSS effects, you have to have a little experience with PHP and CSS. 

If you have questions about this guide or want to add any section or change CSS effect in your author box, please comment below.