How To Add Author Box In GeneratePress Theme Without Plugins

If your blog is on WordPress and you use a Generatepress theme, this post is for you because we have told you how to add an author box Generatepress theme without plugins.

The most commonly used theme in blogging, especially on blogs built on the WordPress platform, is Generatepress, which is available for free or premium, so its users are very high because it is a lightweight theme, so users use it more and more.

How to add the Generatepress author box

Here I will tell you how to add an author box without a plugin, if you want to add it with a plugin, then search by typing the author box plugin, you will find many plugins.

Author box single post in Generatepress

You login to WordPress and visit User >> Your Profile >> here in the About bio write what you want to appear in the author box of the blog, then click on Update

Here we are going to tell you how you can add an author box in Generatepress Premium without using any plugin, we will use the Hook method to add an author box in GeneratePress Premium.

Here we are going to give you some code, using which you can add an author box to the website, for this, you have to follow some steps which are as follows.

Activate Elements

• Login to WordPress Dashboard.
• Click on Appearance and click on Generatepress.
• Now tick on Elements and activate it.

Add New Hook Element.

Now you have to add a new hook element, for this, you have to follow some steps which are given below.

• Click on Appearance and click on Elements.
• Now click on Add New Element a popup will open here after selecting the hook in Choose Element Type and clicking on create.
• In add title, you can write anything like the author box.
• You must copy the code below and paste it into the given box.

<div class="codebarta-author-box">
    <div class="codebarta-avatar">
        <?php echo get_avatar( get_the_author_meta( 'ID' ), 250 ); ?>
    </div>
    <div class="codebarta-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>
</div>

Now in the setting below, you will see the hook option, select generate_after_content in the box in front of it, and tick the box in front of Execute PHP.

Now click on Display rules and select the post in front of the location and then select all the posts. Now click on publish.

Now, this author box has to be designed with Hight Width, Background color, etc. For this, you copy the CSS given below and paste the code inside Appearance >> Customize >> Additional CSS

/* codebarta author box*/

.codebarta-author-box {
	padding: 3%;
	padding-bottom: 10px;
	margin-top: 30px;
	font-size: 0.9em;
	background-color: #64589a;
	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;
}

.codebarta-author-box .codebarta-avatar {
	width: 333px;
	height: auto;
	border-radius: 100%;
	margin-right: 5px;
}
.codebarta-author-box .codebarta-avatar img {
		border-radius: 100%;
	}
.author-title {
    margin-bottom: 0.1em;
    font-weight: 600;
    font-size: 18px;
    color: white;
    background: #433874;
    text-align: center;
    border-radius: 12px;
}
.author-description {
line-height: 1.6em;
    font-size: 15px;
    color: white;
    text-align: center;
    border-radius: 12px;
	  margin-top: 18px;
}

@media (max-width: 768px) {
	.codebarta-author-box {
		padding: 20px;
		padding-bottom: 25px;
		margin-top: 60px;
		flex-direction: column;
		text-align: center;
	}
	.codebarta-author-box .codebarta-avatar {
		margin-right: 0;
		width: 100%;
		margin-top: -60px; 
	}
	.codebarta-author-box .codebarta-avatar img {
		max-width: 100px; 
	}
	.author-links a {
		float: none;
		align-self: center;
	}
	.author-description {
		margin-bottom: -0.1em;
	}
}
/*end of codebarta author box*/

In this way, you can add an author box in the Generatepress theme without a plugin, apart from this, if you do not like this author box, then you can try another author box, you can see its demo in my blog, I use this one myself.