How To Add Author Box In GeneratePress Theme. [2021]

Do you know you can add an author box in the Generatepress theme without installing an additional plugin? 

So, to help Bloggers I have prepared a detailed guide on How to add an author box using the Element feature of the Generatepress theme. 

I know a lot of you ask why not add an author box plugin in WordPress and make the work simpler. Because installing an additional plugin may impact your website speed. It is better to use some custom HTML and CSS code to generate the Author box using the native Generatepress Element feature. 

Note: You can only use this trick if you have the Generatepress premium plugin installed on your WordPress website.

Why Do You Need an  Author Box On Your Website?

Adding an Author Box at the end of the blog post helps your reader and search engine like Google, Bing to know the man behind the article. 

It builds a good relation and trust between the reader and the author and it also helps build authority in the internet community. 

Do you know about the EAT algorithm? To rank well in Google, you need to create a brand by building its expertise, authority, and trustworthiness – which is exactly what E-A-T stands for. Author Box is the first step to achieve that. 

Steps to add author box in generatePress theme. 

Before adding the author box in your Generatepress theme you need to do some basic settings in WordPress. 

1. Add a Profile photo and Author description

Go to the WordPress dashboard and click on the User section. Now Click on the Edit button just below the username. 

Edit user settings in wordpress
  • Save

Now scroll down and you will see an option called “About Yourself”. Here in the “Biographical Info” write your author description and set your Profile Picture just below it.

Note: You can also add a link to your about us page in the Author box using a simple trick. In the biographical info paste the link in this format.

<a href=”https://key2blogging.co/about-us/”>about us page</a>

In this way, you can easily add anchor text with a link in the Author box of the GeneratePress theme.

Add author description and set profile photo
  • Save

If you haven’t added the Gravatar then you can do that by clicking the below link as shown here. 

It will redirect you to the Gravatar website where you have to create an account with your Email address mentioned in WordPress and then Upload your profile image there. It will automatically fetch the profile photo to your WordPress account.

2. Activate Element module

To activate the Element module go to Appearance > GeneratePress > Elements > Activate

Activate Element module in generatepress
  • Save

If you have already done that then you can skip to the third step. 

3. Create a new Hook Element

Now click on the Appearance section and you will see an option called “Element”, click on it.  Now click on “Add new Element” and select Hook.

Create Hook element in generatePress theme
  • Save

4. Set the title as “Author Box” and paste the HTML code

You have to set the title as Author Box and paste the below HTML code in the code editor. 

Set Author title and paste HTML code
  • Save

👩‍💻 Copy the Below code

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

5. Setup Hook setting

After pasting the code you have to set up the Hook setting. In the Hook option select “generate after content” and then click on “Execute PHP” and set priority to “20”. 

Hook setting for Author Box
  • Save

6. Setup Display Rule

Now click on the Display rule just right of settings. Now in the Location select “All singular” and in the Exclude tab select “Frontpage”. 

Display rules for Author box in generatepress
  • Save

Now you have completed the Hook settings. So, hit the publish button. 

7. Add CSS code

Now you have to design your author box using CSS code. So, to do that go to appearance>> Customize>>Additional CSS and paste the below code, and hit the publish button. 

CSS code implementation for author box
  • Save

👩‍💻 Copy the CSS 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;
        box-shadow: 0 9px 28px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.author-box .avatar {
	width: 450px;
	height: auto;
	border-radius: 100%;
	margin-right: 30px;
}
h5.author-title {
	margin-bottom: 0.1em;
	font-weight: 800;
}
.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;
	}
}

Congratulations, You have successfully added the Author box in your Generatepress theme without any plugin. 

🎥Video Guide:

Note: If you are using the free version of the Generatepress theme then you have to add the author box using a plugin. 

Conclusion

Now we have covered the step by step process to add the Author box in the Generatepress theme in WordPress. If you have any doubt ask me in the comment section, or connect me on Twitter

If you like this guide do share it with your Blogging community and appreciate the efforts. Thank you.

🔼Read Also: Top 10 useful chrome extensions for Bloggers

Hello there. I am Abhishek Padhi, an Indian digital entrepreneur. With a handful of years of practice and experiment, I currently share top-notch information related to Blogging, SEO, etc. If you want to start a blog easily and create a fortune out of it, then you will love key2Blogging. You can learn more on the about us page.

1 thought on “How To Add Author Box In GeneratePress Theme. [2021]”

Leave a Comment

0 Shares
Share via
Copy link