How to Add an Author Info Box in WordPress Posts

Share on facebook
Share on twitter
Share on email

This step-by-step guide shows you how to add the author info box in WordPress posts. Having a short author bio tells the reader a little about the writer. It’s an excellent way to connect with visitors and personalise the work. And bios that include headshots put a face behind the name. Seeing a real person builds trust among readers and adds credibility to the site.

An author’s info box can also include social media links, direct contact details, and anything else that might be useful. Author bios are especially helpful with blogs and websites that have multiple contributors. They make it easy for visitors to follow writers whose work they enjoy.

Not all Author Bios Are Equal

Some WP themes offer the author bio as a built-in option, but what if you don’t like it? And what about themes you want to use that don’t include this feature? Well, there are always solutions and workarounds for most things related to WordPress. That means you can add to—or customise existing—themes however you want.

Here are the 4 ways to add author boxes to WordPress articles:

  1. Use the option built into the active theme
  2. Add a customisable bio box using a plugin
  3. Add to sidebars using widgets
  4. Add a custom bio box using simple code snippets

Which method you choose depends on your active theme and personal preference.

#1 Add an author’s bio using the active theme

The first method is the obvious choice if you’re happy with the themes’ author bio feature.

Log into your WP Dashboard as Administrator.

Go to Users => All Users from the side menu.

Click on the Username you want to add the author bio box too.

This example uses the Academy Pro theme. The next screen has fields for the author info. It includes lots of social media contacts and an empty bio box. WordPress uses the Gravatar service for the profile picture. The photo used is associated with the person’s email address. A default image of a Mystery Person displays until users set up their Gravatar.

Here’s how a simple bio looks using the theme’s “Edit User” options. The links in the bio section are manually added to the content using HTML.

There are other options too, like where you want the author’s bio to display on the post or page. You can also remove the bio from posts and archives with a single click if necessary.

Remember to click your Update Profile button at the bottom of the screen when you’re done.

#2 Add a customisable author’s bio with a plugin

Use a plugin if the theme you want doesn’t include a user bio feature, or you don’t like the one it has. The main attraction to plugins is the customisation options they offer. There are several available, so you have plenty of choices. The one we’re going to use for this tutorial is the popular Simple Author Box by WebFactory Ltd.

The plugin’s main features include:

  • Fully responsive (mobile-friendly)
  • Displays author and guest bios, Gravatars, writer’s name, and website URL
  • Displays social icons of your choice
  • Options to add manually or use the auto-add feature (default)

There are two versions of the Simple Author Box plugin, Lite and Pro. We use the Lite version for this tutorial. You can opt for the Pro version at any time if you need extra features.

Install and activate Simple Author Box

If you’re new to WordPress, read How to Install New Plugins for help, then return here.

Install and activate the plugin.

There’s now a new ‘Simple Author Box’ sub-item added to the WP Dashboard menu.

Go to Simple Author => Simple Author to open the settings screen.

The set-up screen offers lots of customisation options. The Author’s basic settings are to edit the profile text, change avatar (or upload an image), and add/edit social media icons. You have 5 ways to display social media signs under the bio text.

You can also choose to align the icons and author’s bio on the left or right side.

Here’s a snapshot of the straightforward edit bio section.

The best thing about this plugin is all the extra customisation choices you get. There are 28 features over 5 tabs to explore, i.e., Settings, Appearance, Colors, Typography, and Misc. 

All customisations are achieved using single mouse clicks, menu selections, and sliders. It takes no time to create unique bios or to experiment with different styles.  

Hit the Save Settings button when you’re done.

Remember to check out the Simple Author Box Pro version if you need even more control.

#3 Add an author’s bio using sidebar widgets

There are a few plugins for adding Author and User profiles to widget-friendly sidebars. There’s even a widget option for the Simple Author Box Lite plugin above. Let’s look at that first.

Go to Appearance » Widgets from the WP Dashboard side menu.

Locate the Simple Author Box Lite widget from the Available Widgets area (left).

  1. Select the sidebar location from the dropdown
  2. Click the Add Widget button

Add a Title for your new bio box.

Choose Autodetect/Author/User from the dropdown.

Click Save and view the live site.

Meks Smart Author Widget

Another popular bio plugin is the Meks Smart Author Widget. It offers flexible display options and is super-easy to configure.

Please read How to Install New Plugins if you require guidance on installation and activation.

Install and activate the Meks Smart Author Widget plugin, then ….

Drag the Meks Smart Author Widget and drop it into your theme’s sidebar.

Update the available configuration options as required (see image). Make sure the Automatically detect author checkbox is active.

Click Save when you’re done, then view the live site and make any changes if needed.

#4 Add an author’s bio using code snippets

We’ve saved the most difficult method until last.

You can add an author’s bio box into WordPress manually using code snippets. It helps if you understand PHP code and know something about CSS. Skip this approach or get someone to help if you have trouble following the procedure.

Why bother with the manual route?

There are reasons why webmasters may want to add an author bio box to WordPress manually. One is that the theme doesn’t include a built-in option. Or, some site owners like to restrict the number of active plugins. Moreover, the manual method also gives greater flexibility and control over customisation.

WARNING! BACKUP YOUR DATABASE, CSS FILE, AND FUNCTIONS.PHP FILE BEFORE PROCEEDING

It’s wise to use child themes when making major changes to WP websites. Read “Why WordPress Child Themes Are Important and How to Create One” if you’re not familiar with this.

The manual method is a 2-step process.

  1. Add a custom CSS style for the author info box
  2. Add code to the theme’s functions.php file

#1 Add code to your Cascading Style Sheet (CSS)

The first step is to add a custom CSS style to your theme’s CSS file. It’s most likely called styles.css, but it could be different. Make sure you have the right file before proceeding.

Go to Appearance => Theme Editor from the Dashboard side menu.

You’re now at the Edit Themes screen.

  1. Click on the Stylesheet (style.css) link if the file’s not already open
  2. Add the custom CSS code to the end of the style.css file

Type the code below to style your new author box.

Feel free to modify the above custom CSS as needed.

3. Click Update File to save the changes

Add code to the theme’s single.php file

The final step is to add code to the theme’s functions.php file. Read “How to Open and Edit Your Functions PHP File if you’re unfamiliar with the procedure. Use author box plugins or get expert help with the manual method if you’re still uncomfortable.

  1. Locate and open the php file from the Edit Themes screen
  2. Add the PHP code below to the functions.php file

function wpb_author_info_box( $content ) {

global $post;

// Detect if it is a single post with a post author

if ( is_single() && isset( $post->post_author ) ) {

// Get author's display name

$display_name = get_the_author_meta( ‘display_name', $post->post_author );

// If display name is not available then use nickname as display name

if ( empty( $display_name ) )

$display_name = get_the_author_meta( ‘nickname', $post->post_author );

// Get author's biographical information or description

$user_description = get_the_author_meta( ‘user_description', $post->post_author );

// Get author's website URL

$user_website = get_the_author_meta(‘url', $post->post_author);

// Get link to the author archive page

$user_posts = get_author_posts_url( get_the_author_meta( ‘ID' , $post->post_author));

if ( ! empty( $display_name ) )

$author_details = ‘<p class=”author_name”>About ‘ . $display_name . ‘</p>';

if ( ! empty( $user_description ) )

// Author avatar and bio

$author_details .= ‘<p class=”author_details”>' . get_avatar( get_the_author_meta(‘user_email') , 90 ) . nl2br( $user_description ). ‘</p>';

$author_details .= ‘<p class=”author_links”><a href=”‘. $user_posts .'”>View all posts by ‘ . $display_name . ‘</a>';

// Check if author has a website in their profile

if ( ! empty( $user_website ) ) {

// Display author website link

$author_details .= ‘ | <a href=”‘ . $user_website .'” target=”_blank” rel=”nofollow”>Website</a></p>';

} else {

// if there is no author website then just close the paragraph

$author_details .= ‘</p>';

}

// Pass all this info to post content

$content = $content . ‘<footer class=”author_bio_section” >' . $author_details . ‘</footer>';

}

return $content;

}

// Add our function to the post content filter

add_action( ‘the_content', ‘wpb_author_info_box' );

// Allow HTML in author bio section

remove_filter(‘pre_user_description', ‘wp_filter_kses');

  1. Click Update File to save the changes

That concludes the 4 ways to add an author bio box to WordPress.

Share on facebook
Share on twitter
Share on email

Subscribe to my newsletter

Subscribers to my newsletter get all the latest news, reviews, advice and gossip in the world of search engines, internet marketing, self-publishing, and North Wales (where I live). You can sign up for my free newsletter by clicking this link.

My Books

I have a range of webmaster related books for sale on Amazon in both Kindle and Paperback formats. WordPress, SEO & Self-Publishing.
On Amazon

My Online Courses

My courses cover a range of webmaster related skills, from learning WordPress itself, to installing an SSL certificate on your site.
On Udemy

Comments

Hello, I'm
Andy Williams!

You can get up to 90% off my Online Courses for webmasters, marketers & affiliates (plus a free course on Gutenberg).

Get my newsletter
delivered to your inbox

18748

We respect your privacy

18749