How to Add an Author Box in GeneratePress

We may get a small commission if you buy something through a link in our posts.

Last updated: May 26, 2021

GeneratePress is a free, lightweight theme that can be extended by a premium plugin that allows you to add essential features.

One of the many things you can do with the GP premium plugin is using Hook Elements to “hook” your own custom code into various areas of the theme without changing core theme files.

This article explains the steps involved in adding a simple author box to blog posts in the GeneratePress theme by using the Hook Element.

Try GeneratePress

One of the many customizations I’ve implemented in this website with the GP plugin is adding an author box to all blog posts.

I think it’s important to have an autnor box on a site like this so readers can learn more about the person that writes all that awesome content.

With the help of the GeneratePress support forum, I was able to easily add, and further customize, an author box on my site.

1: Create a Hook Element

The author box we’re going to display will pull the Gravatar image associated with the author of the site, which is you.

In case you didn’t know, a Gravatar is an image that follows you from site to site appearing beside your name when you comment or post on a blog. So if you haven’t created a Gravatar for your profile yet, go ahead and create one now.

The first thing you do is create a new Hook Element. Navigate to Appearance, Elements, then Add New. Select Hook from the dropdownlist.

In the editor box, copy and paste the following piece of code:

<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 wp_kses( get_the_author_meta( 'description' ), null ); ?></p>
		<div class="author-links">
			<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" title="Read more">
			...
			</a>
		</div>
	</div>
</div>

In the Settings box, choose after_content as the Hook, tick the Execute PHP box and select 20 as the Priority:

In the Display Rules box, select Post and All Posts as the location:

That’s it, you’ve created an author box Hook Element.

But don’t hit the publish button just yet, we need to first add some CSS code to make the author box look pretty.

2: Add CSS Code

There are two ways to add custom CSS code in your GeneratePress theme. The easiest way is inside the Customizer which you can find in Customize, Additional CSS.

The other way, and that’s my preferred option, is to use the Simple CSS plugin, which is developed by the same person who developed GeneratePress.

The benefit of using this plugin is that it allows you to submit CSS in a nice editor within your WordPress dashboard. The CSS you submit here is also theme independent.

Enter the following CSS code and hit save:

.author-links a {
    font-size: 3em;
    line-height: 0.5em;
    float: right;
}

.author-box {
    padding: 4%;
    margin-top: 60px;
    font-size: 0.8em;
    display: flex;
    flex-wrap: wrap;
}

.author-box .avatar {
    width: 30px;
    border-radius: 100%;
    margin-right: 20px;
}

h5.author-title {
    margin-bottom: 0.5em;
}

3: Publish the Hook Element

Once your Hook Element is created and the CSS code has been saved, it’s time to hit the publish button of the new Hook Element.

Before you do that though, make sure you have given the Hook Element an appropriate name, such as “Author Box”.

Once it’s published, navigate to a blog post on your website and see what your new author box looks like.

Of course, you’re free to change the look and feel of the author box, by changing the code of the Hook Element and/or adjusting the CSS code.

4: Optional: Add Author Schema Markup

If you’re tech savvy, then this optional step may be of interest to you.

By default, GeneratePress adds the CreativeWork schema type to blog posts. This element however does not come with author details. This is not an issue, because author details are not mandatory in the CreativeWork schema type.

However, it’s still nice to have author details included in that CreativeWork type, especially when you have these details available in the author box you’ve just created.

This is how you do it.

In the above code snippet, change this line:

<h5 class="author-title">
	<?php printf( get_the_author_meta( 'display_name') );?>
</h5>

Into this:

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

That’s it, your author details are now included in the CreativeWork Schema type. Here’s a screenshot of my details as the author of this article: