How to add Author Box in GeneratePress Theme?

GeneratePress is a very good WordPress theme but many people are not aware of coding, because of this they are not able to customize the theme properly.

If you also use premium version of GeneratePress theme and you want to put auther box under your post, then you will read this post completely.

Read More: How to Removal #more Permalink of Generatepress Theme

How to add Author Box in GeneratePress

First of all login to your WordPress dashboard and click on GeneratePress option inside Appearance.

The page given above will open in your WordPress dashboard.

Now you click on Elements for example see below image How to add author box in GeneratePress

After clicking on Elements, you will have the option to create Elements , you can see below.

Now you click on Add New Element , when you add New Element, you will get Choose Element type option, for example you can see the image below.

You have to create Hook Element, when you create Hook Element , you will get the option of Add new hook.

In the above image, you can see what kind of hook element you will get to see.

Hook Element Php Code

Copy the php code we have given to you and add it to the hook element.

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

You can see below where to add the above php code. You add in the same way.

After adding Php Code, now you have to do a little setting, after that your author box will be set well, the way you set up in the image below,

  • Hook : Generate_after_content
  • Execute PHP : Click right
  • Priority : 20

After doing all these settings, publish it by clicking on publish and check that author box will be showing under each of your posts, now we will add css for styling so that author box looks beautiful How to add author box in GeneratePress.

Add extra css for style

Below we have given the css for the author box, you can copy it by going to ap pearance > Customize > Additional CSS and add it How to add author box in GeneratePress.

/*Single post author box */
.author-box {
	padding: 3%;
	padding-bottom: 10px;
	margin-top: 60px;
	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-radius: 5px;
	box-shadow: rgba(23, 43, 99, .14) 0 7px 28px !important;
}
.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.7em
}
.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;
	}
}

We hope that you have liked the How to add author box in GeneratePress tutorial, if you like to read new tutorials like this, then stay with our blog, you will keep getting similar posts.

Sharing Is Caring:

Hello Friends, My Name is Roton Kumar Roy (Founder) I am a Full-Time Blogger, Youtuber and Digital Marketer. I have start infotechbot.com for those people who want to learn Complete Blogging Course sitting at home for free online.

Leave a Comment