In this article, I will teach you how to show an author box in the GeneratePress theme. While surfing the internet, I found many blogs using an author box. So, I decided to help GeneratePress users. Since I use the same theme for my blog, this feature undoubtedly attracted me. Without further delay, let’s dive into the article.
Read: How to Add a Reading Progress Bar in GeneratePress
Having an author box is important for most blogs. However, since I display my details on the sidebar, I am not using it. If you don’t have an author box displayed on your blog, follow the steps below.
To show an author box, a GeneratePress user must have GP Premium. If you want the GP Premium plugin, just contact me. I will provide you with the plugin for free—it’s free for regular blog visitors.
How to Show an Author Box in a GeneratePress Theme
As mentioned above, to start this process, you will need the GP Premium plugin. With the premium plugin, you can easily modify your blog, and the Element feature is one of its many functionalities. Before we proceed, install the GP Premium plugin. After that, go to Settings and enable the Element option.
Adding a User Profile Photo and Description
To display an author photo and description in an author box, go to your profile settings. Add a profile photo using Gravatar. Alternatively, you can use a plugin like Simple Local Avatars to upload a photo for your profile. Then, write a short description of yourself. Hit the Save button once you’ve completed all the steps.
Once you enable the Element option, go to Appearance > Elements. Click on Add New, and then select Hook. Doing so will take you to the next screen.
Give your Hook a name. For example, you can simply write “Author Box.”
Paste the HTML Code (Author Box GeneratePress)
Next, paste the HTML code into a code editor. Simply copy the code provided below, and paste it into the editor.
<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>Setting Up the Hook
Once you’ve pasted the code, configure the Hook settings. In the Hook option, select generate_after_content. Turn on the Execute PHP option. Then, set the Priority value to 20.
Display Setting
Now, navigate to the Display Rules section. In the Location field, search for “Post.” After selecting Post, it will automatically add the “All Posts” section.
Congratulations! You’ve successfully completed the Hook settings. Now, all you need is CSS to style your author box.
Adding CSS Code (Author Box GeneratePress)
Adding CSS code is the final step. To do this, copy the CSS code provided below. Then, go to Appearance > Customize > Additional CSS, paste the CSS code, and hit Save.
.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;
}
}If your Additional CSS section is already full, you can use a plugin. I recommend the Simple CSS and JS plugin, which is lightweight and ideal for custom CSS, JS, and HTML code.
Final Thoughts
Displaying an author box in GeneratePress is a simple process. All you need to do is follow the steps above. Afterward, you’ll have a beautiful new author box below every blog post.
That’s all for today! If you need any help adding an author box to your blog, feel free to contact me. I’ll try my best to reply as soon as possible. Until then, happy blogging, and have a great day!