GeneratePress Theme Customization CSS Tweaks

GeneratePress Quick Review

GeneratePress is a lightweight WordPress theme that focuses on speed, stability, and accessibility. Free (paid) theme created by Developer from Canada.

The theme has more than 2.8M active installation in WordPress and 1,000 5-star ratings. The developer of this theme is very responsive and supportive he knows what he is doing.

The best thing about this theme is that its focuses on speed which I like the most. The premium version comes with developer-friendly support.

I first installed GeneratePress on my website in 2017 within 15 minutes and I purchased the premium version of GeneratePress.
I just activated all modules of the premium version to quickly design my website.
I further moved my 10+ other niche sites from OceanWP to GeneratePress. That’s what today I will try to explain in this article.

generatepress theme overview and customization

Some GeneratePress Premium Features

  • Features
  • Elements
  • Performance
  • Speed Test
  • Customization options
  • Pricing

GeneratePress HTML Element Author Box

You can see the author box at the bottom of this post which is created By GeneratePress Hook Element. Here is how to show a simple author box after post.

GeneratePress HTML Author box

Here is how to Add this Author Box in few seconds.
Go to your WordPress Dashboard click On GeneratePress and Select Add New Element

Just follow these steps and add the given code to your Hook elements.

GeneratePress Author Box Code

HTML Code For Author Box

<div class="author-box">
	<div class="avatar"><?php echo get_avatar( get_the_author_meta( 'ID' ));?></div>
	<h5 class="author-title"><?php printf( get_the_author_meta( 'display_name') );?></h5>
	<div class="author-summary">
		<p class="author-description"><?php echo links_add_target(get_the_author_meta( 'description' )); ?></p>
	</div>
</div>
  • Enable Execute PHP option
  • set priority to 20

Author Box CSS

.author-description {
    margin-bottom:5px;
}
.author-box {
    padding: 4%;
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
	background-color: #fafafa;
}
.author-box a {
    border-bottom: 2px solid rgba(45, 130, 230, 0.4);
}
.author-box .avatar {
    width: 40px;
    border-radius: 100%;
    margin-right: 20px;
}
h5.author-title {
    margin-bottom: 0.5em;
	  font-size:1.5em;
}

element.style {
}
.author-box {
    padding: 4%;
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    background-color: #F2F4F9;
}
Syed Saadullah

I am Saad. The person behind EagleTuts. I craft actionable advice about WordPress, security, speed and performance. Feel free to ask an

Leave a Comment