How To Add an Author Bio Box to Your WordPress Posts

In this quick tutorial, you’ll learn how to add an author bio box to the bottom of your WordPress blog posts. This can be something as simple as a short blurb about who you are to introduce yourself to your readers.

By doing this, you’ll increase engagement by automatically linking to other pages on your website.

Install the Ad Inserter Plugin

You’ll need to install the Ad Inserter plugin by Igor Funa. You can also find the plugin from your WordPress dashboard by going to Plugins > Add New > and search for “ad inserter”.

If you are using the GeneratePress theme, you don’t need to install a plugin. Instead, you can add a Hook under Appearance >  Elements > Add New Element and paste in the HTML code below.

While this isn’t specifically an author bio box plugin, it does exactly what we need it to do. Plus, it’s smart to limit the number of WordPress plugins you install so your website runs fast. The Ad Inserter plugin allows me to not only add an author bio box, but also insert affiliate disclosures.

After installing and activating, find Ad Inserter in your list of plugins and go to the plugin’s settings page.

Meet the Author Bio Box

Within the large text box on the plugin’s settings page, copy and paste the following code. Modify the title between the <b> tags and your author info between the <p> tags as necessary.

<b>Meet the Author</b>
<br>
<style>
@media screen and (max-width: 623px) {
  .row {
    flex-direction: column;
  }
}
</style>
<div style="display: flex; align-items: flex-start;">
  <div class="row" style="display: flex; align-items: flex-start;">
    <div class="column" style="margin-right: 1em;">
      <?php echo get_avatar( get_the_author_meta('email'), '100' ); ?>
    </div>
    <div class="column" style="flex: 1;">
      <p>Since he was a child, Tony has eaten thousands of bowls of cereal. <a href="/about/">Learn how Tony got his start as The Cereal Guru</a>, and why he decided to start this cereal blog. If you want to send Tony a quick message, then <a href=“/contact/“>visit his contact page here</a>.</p>
    </div>
  </div>
</div>

The above code generates a “meet the author” box that looks like this.

Pin

The great thing about this chunk of code is that it’s mobile friendly. If necessary, you can also change the max-width value from 623px to whatever your mobile breakpoint is set to. If you’re not sure, just play around with how the author bio box looks on various screen sizes.

Ad Inserter Plugin Setting

Next, we need to configure a few settings to make sure the author box shows after the content of your blog post. There are four setting we need to change according to the screenshot below:

Pin

1. Rename the block of code to Author bio
2. Enable PHP code execution
3. Select After content for the insertion type
4. Save Settings 1 – 16

Now, you can go to a blog post and see the meet the author box below the last paragraph of your article. You can change where the box shows up by selecting a different insertion location.

Choose Your Headshot Image with Gravatar

The final step is to choose your headshot image. We do this with Gravatar which is built into WordPress.

From the upper-right corner of your WordPress dashboard, click where it says Howdy > Edit My Profile > and in the Profile Picture section, click the link that says You can change your profile picture on Gravatar.

Pin

Here, create a Gravatar account with your WordPress admin email address and upload your headshot. It might take a few minutes, but eventually when you refresh your blog post, you’ll see your headshot appear in your WordPress author bio box.

For more cool ways to use the Ad Inserter plugin, check out my tutorial on inserting affiliate disclosures to your blog posts.

If you have any questions about the Ad Inserter plugin or adding an author bio box to your website, let me know in the comments below.