How To Add Author Box In GeneratePress Theme

how to add author box in generatepress theme

In this article, we are going to understand how to add author box in GeneratePress theme, with or without a plugin.

GeneratePress is an amazing theme with good performance. It is also a very good choice to install this theme with SEO perspective, as it comes with built-in schema markup. Moreover, Bloggers and Affiliate Marketers love this theme as it comes with multiple pre-made site templates for various niches.

With multiple features like pre-made templates, great customization options, built-in WooCommerce, and brilliant support GeneratePress is go-to theme between Bloggers, Affiliate Marketers and people who create Online Web Stores.

By default, GeneratePress does not give you an author box. Since, this theme is super popular in the WordPress eco-space, therefore having a nice-looking author box in this theme has been writer’s wish from a long time.

Whether you are using the GeneratePress free version or premium, you will have to add an author box by yourself.

Hence, I made this article, so that you can easily add author box in GeneratePress theme that shows a personal touch to all your posts.

But, first let us understand what’s the need of an author box on a website?

bluehost hosting banner

Why We Need Author Box On Website?

An author box helps your visitors or readers to build trust in you. Having them see a real person behind the content increases your credibility and strengthens your authority. Author box also helps other writers to connect with you. Bring you more content, that eventually gets you more audience.

Even the search engines will love the effort you put in to making an author box.

Google’s 3 important metrics, E-A-T (Expertise Authority Trust) – are factors to measure how much trust should Google (as a search engine) should put on your website.

If your website is a single author WordPress site, adding an about me page is more than enough. But, for multi-author WordPress website, having an author box is very important.

When it comes to TRUST, you’d want both – the search engine and your audiences to be fully satisfied.

What To Know Before Adding Author Box In GeneratePress Theme?

Before adding the author box to your GeneratePress theme, it is important to know about biographical information and Gravatar.

Biographical Information is the user’s information you find on their profile page.

user biographical information in user profile

A Gravatar is a Globally Recognized Avatar. It helps you upload an image and create a public profile that you can use on several Gravatar enabled websites.

Let us look at all the steps involved in using a Gravatar.

Create a Gravatar by signing up at the Gravatar website

Fill in your full name, a username (optional), and upload an image. Also write something about yourself. This is similar to biographical information on your WordPress site.

Create Profile on WordPress Website

On a new WordPress website, the first thing to do is to go to Enable Avatars.

For enabling user avatars, go to your WordPress Dashboard and hover your mouse on Settings, from there select Discussion.

WordPress discussion settings

Come down to Display Avatars section and tick the Show Avatars box.

Give your profile picture a suitable rating and your done. Don’t forget to hit the Save Changes button.

Now go to your WordPress Dashboard locate the Users section and then click on Profile.

wordpress users

Now, update your profile with Full Name, Nickname, public name, email, biographical info, and image.

wordpress user profile update

After updating your profile, hit the Update Profile button at the bottom of the page.

How To Add Author Box in GeneratePress Free Theme?

For adding the author box in free GeneratePress theme you will need the help of either a plugins.

I will list out a few plugins that can perform the task for you. Later on, we will look at a Plugin which helps you create an author box in a Sidebar Widget.

Simple Author Box

As the name says ‘simple’ – it is actually very simple to implement and one of the best author box plugin that does quite a decent job compared to all other plugins in free range.

simple author box WordPress plugin

Simple Author Box is a premium plugin but gives you gravatar, name, website, author bio, and social icons in the free version.

Features of Simple Author Box

  • The Simple Author Box allows to add Gravatar, Author name, and Author description.
  • Add an author box on single post without affecting its PageSpeed
  • It is responsive and customizable to match your theme design. Plus. Simple Author Box is fully optimized for mobile devices.
  • You can add up to 30 different social media platforms.

Ultimate Author Box Lite

Another plugin that gives you a good looking author box is the Ultimate Author Box lite WordPress Plugin. It has multiple features that make this plugin stand out from the crowd.

There is a free and a premium version of this plugin. I would say that the free version will be more than enough for you. But, you could definitely try the premium version.

Features of Ultimate Author Box Lite

  • Ultimate Author Box Lite free version comes with 5 Author Box templates.
  • Ultimate Author Box Lite lets you add up to 10 different social profile links of the author.
  • It lets you completely customize your Author Box with different colors.
  • With the Ultimate Author Box, you can also add Multiple Tabs to the Author Box.
  • This plugin allows you to show or hide Author Box on individual posts and/or pages.
  • Ultimate Author Box is completely responsive and can also be used for small screen devices.
  • They provide you with shortcode, that helps in displaying Author Box anywhere on the website.

Starbox – The Author Box for Humans

From the GeneratePress Support Forum I have seen that Starbox Plugin is the most recommended author box plugin.

starbox wordpress author box plugin

Starbox is a gorgeous looking author box plugin that makes readers click to see more about authors. It has professional themes and landscaping to choose from. Starbox also lets you place the author box on top or bottom of the page.

Features of Starbox

  • It creates Google Microformats that help to display Rich Author Snippets in Google search results.
  • You can make it work on Posts and Pages and even on sites that have WooCommerce or other eCommerce plugins installed.
  • Moreover, you can also display Author Box on different Author pages with more information, compared to author box under each post or page.
  • It offers social media profiles of Facebook, Twitter, LinkedIN, Instagram, Flickr, Pinterest, Tumblr, YouTube, and Vimeo. Each of your authors can have different set of social media profiles showcased under their description.
  • Starbox also offers a section that displays the ‘Latest Posts’ from that author.
  • You can set different theme for each author. This is helpful if you have different categories each with a different theme design.

The next plugin we will be talking about is special as it lets you create a Sidebar Widget to showcase your author profile.

Meks Smart Author

For using this, first you will have to download Meks Smart Author plugin.

Go to your WordPress Dashboard, look for Plugins and click on Add New.

add new plugins in wordpress website

Now type Meks Smart Author in the search plugins section.

You will need to install and activate the plugin.

Following that, make sure your posts sidebar layout is set to Right Sidebar (in my example its in the right hand side).

posts sidebar layout

Then go back to your WordPress Dashboard and now go tot Appearance, and this time click on Widgets.

wordpress widegets

The download of Meks Smart Author should have brought in the plugin in the Widget page.

Quickly look for Meks Smart Author, press the drop down, click on Right Sidebar and then click on Add Widget.

meks smart author adding to widget

After adding it to widget you will need to do some basic setting.

Choose the desired Author/User, select Automatically Detect Author, set your desired Avatar Size and click Done.

meks smart author widget setting

After doing all of this you should be seeing an Author Box in the Right Sidebar of your Post.

meks smart author box in right sidebar of post

I understand that the author box does not look fancy, but that start looking great with a little bit of CSS.

Now that you have seen a few plugins that can add author box in GeneratePress free theme, lets jump over to adding an author box in GeneratePress Premium Theme.

Also Read:

How To Add Author Box In GeneratePress Premium Theme?

If you are using the GeneratePress free version then I would highly suggest you to try o GeneratePress premium version.

This blog – BloggingIdol, is running on GeneratePress Premium and I am very satisfied with this theme. I am able to perform all types of customizations on this blog

GeneratePress premium offers a module called as Elements. With the help of Elements module we can create special Hooks that act as a small code which can be infused anywhere onto our website.

This completely removes the requirement of Child Themes. Otherwise, earlier we’d have to create a separate child theme having all the additional codes required to run extra functionality, not provided by the theme.

Just like how, adding an author box is an extra feature we’d want on our website which is not given by GeneratePress, by default.

The following steps will help us add author box to GeneratePress premium theme website;

  • Activate the Elements Module, from GeneratePress Module Section
  • Add New Elements = Go to Appearance > Elements > Add New Hook
  • Use the PHP Code and add Author Box in GeneratePress Theme
  • Go to Appearance > Customize > Additional CSS
  • Add the CSS Code to Style the Author Box

Activate Elements Module from GeneratePress Module Section

For activating the Elements Module, go to your WordPress Dashboard, look for Appearance and click on GeneratePress.

wordpress dashboard appearance generatepress

Once, the GeneratePress Modules page shows up, you will need to Activate the Elements Module. In my case the Elements module has already been activated.

generatepress modules activate elements

Now go back to your WordPress Dashboard and this time select Elements from Appearance.

select elements from your wordpress dashboard

Adding New Element In GeneratePress = Go to Appearance > Elements > Add New Hook

Now click on Add New Element and from the Element Type Box – select Hook

choose element type as hook to create author box in generatepress theme

Now, in the following steps we shall give a name to the GeneratePress Hook and add author box PHP code.

Use the PHP Code and add Author Box in GeneratePress Theme

After creating a Hook, name the Hook and add the required PHP code. This PHP code fetches the Author Avatar, Author Bio, Author Meta, and other related social profile links.

generatepress premium theme author box php code

I am posting the PHP code for your reference.

<div class="author-box">
      <div class="avatar"><?php echo get_avatar( get_the_author_meta( 'ID' )); ?></div>
 
      <h5 class="author-title">
      <?php printf( esc_attr__( '%s', 'the author' ), 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 ); ?>
      </div>
 
</div>

Following that, you will have to perform some Settings apply certain Display Rules for the Hook to function appropriately.

generatepress author box hook settings

Make sure to select ‘generate_after_content’, Execute PHP, and give Priority of 20. This will ensure that the author box always gets generated after the main content. Your PHP code will get executed and a priority of 20 will call that function after several other functions have been called, when the front-end of the page loads.

Click on Display Rules to set where all you want your author box to be shown.

generatepress premium theme author box display rules

In the Location section select Post and All Posts, for your Author Box to be displayed under all your posts.

After completing the above steps, hit the Publish Button.

The author box hook has finally been created. It’s time to stylize your author box by writing some CSS Codes.

Go to Appearance > Customize > Additional CSS

For doing this, you will need to go back to WordPress Dashboard and go to Appearance, to select Customize.

select customize from appearance under wordpress dashboard

Selecting Customize will open the GeneratePress Theme Customizer.

generatepress theme customizer

From here, you will need to select Additional CSS and type in the CSS code.

/*AUTHOR BOX*/

.author-box {
  padding-top: 25px;
	padding-bottom: 8px;
	padding-left: 30px;
	padding-right: 20px;
	margin-top: 30px;

	background-color: #fff;
	display: -webkit-box;
	display: -ms-flexbox;


  flex-wrap: wrap;
display: flex;
  align-items: center;


	border-radius: 5px;
  box-shadow: rgba(23,43,99,.4) 0 7px 28px!important;
	border-left: 7px solid #0693E3;
}
.author-box .avatar {
	
	width: 90px;
	height: auto;
	border-radius: 100%;
	
	margin-right: 30px;
}
h5.author-title {
	margin-top: -25px;
	margin-top: 0.1em;
	font-weight: 700;
	font-size: 30px;

}
p.author-description {
	line-height: 1.6em


	
}

/* FOR MOBILE DEVICES */

@media (max-width: 768px) {
    .author-box {
        flex-direction: column;
        text-align: center;
	padding: 50px 10px 10px;
			
			
    }

    .author-box .avatar {
        margin-right: 0;
        margin-bottom: 10px;
        width: 100%;
	margin-top: -5px;
    }

    .author-box .avatar img {
      
			max-width: 90px;
    }
	
	h4.author-title {
    margin-bottom: 0.1em;
	}	
		
	.author-description {
	margin-top: 10px;
	margin-bottom: 10px;
}

After adding the above CSS for both desktop and mobile devices your author box should look like the screenshots mentioned below.

how to add author box in generatepress theme - desktop view
add author box in generatepress theme – desktop view
how to add author box in generatepress theme - tablet view
add author box in generatepress theme – tablet view
how to add author box in generatepress theme - mobile view
how to add author box in generatepress theme – mobile view

Conclusion

In the end, I would like to conclude that whichever theme you are running – GeneratePress free or premium version, all the methods to add an author box are available for you in this article.

It is also very generous of the GeneratePress Support team to provide the dedicated PHP and CSS code that works so well with their theme. I have done some changes in order to show you how to add author box in GeneratePress theme.

I would recommend you to go with the GeneratePress premium version as the method is very simple, pus you also get the code from this article.

Also Read:

Ankur Purecha

I am in love with WordPress, building websites, doing SEO, and all that kind of stuff. I generally write about WordPress, Blogging, and SEO on BloggingIdol

Leave a Comment