No doubt GeneratePress is an awesome theme. It is fast, feature rich and reliable theme that can be used to develop a blog or an ecommerce website. Even after having so many features, you have do some tweaks to add elements like author box. Here is a complete guide to add author box in generatepress theme in WordPress.

Here is the video tutorial for the same

Step 1 – Adding author bio

The first step to add author box in generatepress theme is to have an author bio. Follow the steps below to add an author bio

• Login to WordPress
• Click on “Users”
• Hover to the user name and click on “Edit”
• Scroll down to “About yourself” and enter the “Biographical info”
• Click on “Update Profile” button given at the bottom.

Step 2 – Activate “Element” module in generatepress

Next step is to activate the “Element” module in generatepress plugin

• Click on “Appearance”
• Click on “GeneratePress”
• Scroll down to “Elements” and click on the “Activate” button given infront

Step 3 – Create new element and adding author box

Next step is to add and configure element.

• Click on “Appearance”, then click on “Element”
• Click on “Add New Element”, choose “hook” in the drop-down and click on “Create”
• Enter “Author bio” in the field “Add title”

Copy and paste below code as shown

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

• Now scroll down to “Hook” and select “generate_before_comments_container” from the drop-down
• Enable the check box infront of “Execute PHP”, enter priority as “10”
• Now click on “Display Rules”
• In the Location drop-down choose “post” and “All Posts” in the next drop-down
• Click “Publish”

Step 4 – Adding CSS to Author Box

Final step is to add CSS to our author box

• Click on “Customize”
• Click on “Additional Css” and copy and paste the below code.

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

Click on “Publish” and its done.