How to Add Author Box in GeneratePress Theme in WordPress?

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.