How to Add an Author Box in GeneratePress

Last updated:

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

Adding An Author Box with Gravatar in 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.

Create new Hook Element in GP

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

<div class="author-box">
	<?php 
	global $post;
	$author_id = $post->post_author;
	?>
	<div class="avatar"><?php echo get_avatar( get_the_author_meta( $author_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:

GP author box settings

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

GP author box display rules

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: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        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.

>> Related: How to change the author archives URL to the about page.

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:

Schema markup in author box

Join Blog Pioneer

​JOIN BLOG PIONEER

​​Subscribe now and learn how to grow your ​blog into a thriving business with effective SEO and monetization strategies.

​Bonus: My NR.1 trick to give your new blog post an immediate SEO boost!

 
AJ Mens

I have been running an online business since 2015 and am using Blog Pioneer to help you achieve financial success online.

10 Comments
  1. Hi, thanks for this it worked wonders.

    Few additional questions: how to show the social profiles in this author box? Where to change the link to go to about page instead of home page or author archive page?

    Thank in advance.

    PS. Blog Pioneer looks awesome, well done.

    • Thanks Ville.
      Adding social profiles is a good idea, I’ll see if I can change the code to make that work.
      In regards to linking to the about page, I’ve published a post explaining exactly that, see the reference further up in this article.
      Hope it helps!

  2. Hi,

    Just to say thank you. I wasn’t looking for this specific topic, however, I was planning to learn how to use GeneratePress hooks.

    Keep good work!

    • Not sure why it’s not working for you Roshan. Are your User settings correct and is your Gravatar set up properly? Could also be a lazy load conflict.

  3. I just switched over to GeneratePress and this was a huge help for me as I couldn’t figure out how to get the author box to show! Thanks. Everything worked perfectly as you outlined. I have only one problem – my author pic is not pulling from Gravatar. The author blurb text is showing up, but no image. Any ideas?

    • That’s strange Mary, for some people it works, and for others it doesn’t seem to work. Hard for me to tell what’s going wrong of course, but I would first make sure your user settings are correct and that your Gravatar is set up correctly. If it still doesn’t show up, have a look at the html source code to see if there are any code errors. Oh and clear cache.

Leave a Comment