How to Add an Author Box in GeneratePress Theme without Plugin

How to Add an Author Box in GeneratePress Theme: An author box gives the information about the person who written the article. In GeneratePress theme, you can add Author Box without any plugin by just copy and pasting ou custom Php code and CSS code via GeneratePress Block Elements. In this article, you will learn hot add to add an author box in GeneratePress theme.

Method 1: Using GeneratePress Block Elements

It is very easy to add a custom code in GeneratePress, such as an author box, to your posts using its Block Elements option.

Step 1: Create a New Block Element

1. Log in to your WordPress Dashboard.
2. Go to Appearance > Elements.
3. Goto Add New and choose Block as the type of element.
4. Write the name of your block element something like “Author Box.”
5. Paste the below PHP code.

Step 2: Set the Display Rules

1. Scroll down to the Display Rules section.
2. Set the location to Posts > All Posts to show the author box on all single posts.
3. Under Hook, choose generate_after_entry_content to place the author box at the end of your post content.
4. Save and publish your element.

Step 4: Add CSS for Styling

To style your author box, add below custom CSS via Appearance > Customize > Additional CSS.

PHP Code

<div class="webinsights-author-box">
    <div class="insights-avatar">
        <?php echo get_avatar( get_the_author_meta( 'ID' ), 250 ); ?>
    </div>
    <div class="insights-author-info">
        <div class="author-title" itemprop="author" itemscope itemtype="http://schema.org/Person">
            <span itemprop="name"><?php printf( get_the_author_meta( 'display_name') );?></span>
        </div>
        <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="https://earngrip.com/" title="Read more about this author">...</a>
       </div>
    </div>
</div>

CSS Code

/* earngrip author box*/

.webinsights-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;
    box-shadow: rgb(23 43 99 / 30%) 0 2px 10px;
    border-radius: 25px;
}

.webinsights-author-box .insights-avatar {
	width: 250px;
	height: auto;
	border-radius: 100%;
	margin-right: 30px;
}
.webinsights-author-box .insights-avatar img {
		border-radius: 100%;
	}
.author-title {
	margin-bottom: 0.1em;
	font-weight: 600;
	font-size:18px;
}
.author-description {
	line-height: 1.6em;
	font-size:16px;	
}
.author-links a {
	margin-top: -1.5em;
	font-size: 2em;
	line-height: 2em;
	float: left;
}
@media (max-width: 768px) {
	.webinsights-author-box {
		padding: 20px;
		padding-bottom: 25px;
		margin-top: 60px;
		flex-direction: column;
		text-align: center;
	}
	.webinsights-author-box .insights-avatar {
		margin-right: 0;
		width: 100%;
		margin-top: -60px; 
	}
	.webinsights-author-box .insights-avatar img {
		max-width: 100px; 
	}
	.author-links a {
		float: none;
		align-self: center;
	}
	.author-description {
		margin-bottom: -0.1em;
	}
}
/*end of earngrip author box*/