• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

SwiftGuides

How-to Guides, Tutorials & Much More

  • Home
  • Servers
  • Applications
  • Opinions
  • Search
You are here: Home / Applications / How to Add Author Box in GeneratePress Theme in WordPress?

How to Add Author Box in GeneratePress Theme in WordPress?

July 7, 2024 by Sourabh Verma Leave a Comment

No doubt GeneratePress is an awesome theme. It is fast, feature rich and reliable theme that can be used to develop a blog or an ecommerce website. Even after having so many features, you have do some tweaks to add elements like author box. Here is a complete guide to add author box in generatepress theme in WordPress.

How-to-add-author-box-in-generatepress-in-wordpress
How-to-add-author-box-in-generatepress-in-wordpress

Table of Contents

  • Step 1 – Adding author bio
  • Step 2 – Activate “Element” module in generatepress
  • Step 3 – Create new element and adding author box
  • Step 4 – Adding CSS to Author Box

Here is the video tutorial for the same

Step 1 – Adding author bio

The first step to add author box in generatepress theme is to have an author bio. Follow the steps below to add an author bio

  • Login to WordPress
  • Click on “Users”
  • Hover to the user name and click on “Edit”
  • Scroll down to “About yourself” and enter the “Biographical info”
  • Click on “Update Profile” button given at the bottom.

Step 2 – Activate “Element” module in generatepress

Next step is to activate the “Element” module in generatepress plugin

  • Click on “Appearance”
  • Click on “GeneratePress”
  • Scroll down to “Elements” and click on the “Activate” button given infront

Step 3 – Create new element and adding author box

Next step is to add and configure element.

  • Click on “Appearance”, then click on “Element”
  • Click on “Add New Element”, choose “hook” in the drop-down and click on “Create”
  • Enter “Author bio” in the field “Add title”

Copy and paste below code as shown

<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>
  • Now scroll down to “Hook” and select “generate_before_comments_container” from the drop-down
  • Enable the check box infront of “Execute PHP”, enter priority as “10”
  • Now click on “Display Rules”
  • In the Location drop-down choose “post” and “All Posts” in the next drop-down
  • Click “Publish”

Step 4 – Adding CSS to Author Box

Final step is to add CSS to our author box

  • Click on “Customize”
  • Click on “Additional Css” and copy and paste the below 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;
}
.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.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;
}
}

Click on “Publish” and its done.

Category: Applications Tagged In: wordpress

Like my work? Don't Forget to Share

Share on Facebook Share on Twitter Share on LinkedIn Share on Reddit Share on WhatsApp Share via Email

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About Sourabh

Hi, I am Sourabh, welcome to SwiftGuides! With over 12 years of experience in Linux, SysAdmin, databases, cloud computing, and other IT-related areas, I make sure to publish easy-to-follow, 100% working tutorials. I hope you like my work. Thanks!

Stay with SwiftGuides

Follow on Facebook Follow on Twitter Follow on LinkedIn Follow on Reddit Subscribe on YouTube Follow on Instagram

SwiftGuides: Howtos, Tutorials & Guides © 2025 · All Rights Reserved

  • Contact Us
  • Privacy Policy
  • Disclaimer