Adding an Author Image and Bio Box in WordPress, and Linking to a Google+ Profile

Attaching a bio box and an image to blog posts in WordPress can help readers identify, and perhaps gain a level of trust with the writer. The bio box can serve many other purposes as well. In standard article marketing and even guest blog posting, the author/bio box can help with SEO when links are included. And of course with the right call to action or when enough interest is present, the reader may follow the links and perhaps become a new subscriber (or customer) on the author’s web site or blog.

In this tutorial I will explain how to attach an author bio box to the posts on your site and link it to Google+ even if your theme doesn’t support it by default.

I will show you how to make a author bio box that will look similar to the following screenshot:

First, More About the Bio Box

A bio box can also link to the writer’s social profiles on the Internet. Standard profiles would be Twitter, Facebook (page and/or profile), Google+ (page and/or profile), LinkedIn, etc. When linking to a Google+ profile from an article and using the proper relationship or “rel” attribute in the link, Google can keep track of all of a writer’s content that is scattered across the web. This can help establish Google Author Rank or Google Authorship. The value for the rel attribute needs to be “author” to establish the connection between the writer’s G+ profile and the article. When this connection takes place, eventually when the articles show up in the SERPS (Google search results), the G+ profile photo may show up next to the results which can establish higher click thrus and credibility. Plus it provides links to other content from the same author found on the web.

The author relationship can be established in a few different ways. The Google+ profile URL being linked to can have a ?rel=author at the end, or rel=author can be included in the anchor tag. Another way is to use a link element between the header tags in the HTML.

Showing the Profile Box in WordPress Usually Requires Little Effort if Any from the Webmaster

A lot of the time the theme being used on a WordPress site will include an author bio box below a post. Sometimes it will include it above the post, in the sidebar, or in some other spot. But in the event the theme doesn’t show it (there might be a spot in the theme’s option for toggling it on and off), either using a plugin or creating your own custom function is in order. The custom function can then be used to create a custom plugin, but in this article I will just be going over adding the custom function to the Theme Functions file.

All of the bio information gets pulled in from the Profile for the given the user. Some plugins and themes will add extra values in there that can be used, but most of the time if they do they will also display the bio box as well. The WordPress Codex contains a list of all the possible values from the default installation of WordPress that can be used in a custom bio box. In the example I will present today I will be including the name and description. I will also pull in an image from Gravatar.

What is Gravatar and Where is it Used?

Gravatar stands for Globally Recognized Avatar. WordPress has native support for it. It essentially allows you to use the same avatar across web sites that support it. They could be used for commenting and authoring, etc. All it requires is setting up an account at Gravatar.com and uploading an image. Now, anytime you comment or create a user on a site that supports it (like a WordPress-driven site), and use the same email address as used in your Gravatar account, your image will be pulled in.

As the webmaster we are required to use the right commands to make that happen. Part of the meta data for a WordPress user includes their email address. While we usually wouldn’t want to display an email address publicly, when using it as a paramater in the “gravatar function” we can pull in the proper image to be used in the bio box for the author. Comments can be setup to use the gravatar as well for your WordPress site by turning on Avatars in the Discussion Settings in the WordPress dashboard.

Create a New Author and/or Modify the Profile Information for that User

As mentioned above, the user profile information is what is used in the author box. The code only has to be placed one time and it will work for all users when put in place. Just decide beforehand what values you want to use in the bio box.

To create a new user just click on Users >> Add New. You won’t be able to fill in everything there. You, or that user will need to modify the values by “editing” that user after it is created. If it is something you want the user to do, make sure to select the setting to email the user their password so that they can login and modify their profile.

If you plan to make the modifications, click on Users >> All Users, then click on the Edit link that shows up after hovering over the particular user. To modify your own account, click on Users >> Your Profile.

Video Tutorial

Sample Code for Placement in the Theme’s Function.php File

Most themes will have a “Theme Functions” file that is available for edit in the template editor. Placing functions in there, and attaching them to the proper WordPress “hooks” and “filters” can help you control some aspects of the WordPress experience. In this case we will be running code that will place a custom author box just below the content of each post.

Just below the function I will give a brief run down of what it does. To place the code go to Appearance >> Editor, then go to the Theme Functions file (functions.php). You may want to use your FTP software (or web based File Manager) to backup the file before editing, that way you can restore the backup right away if something goes awry.

Most of the time the file will have a comments area that explains where to place any custom functions. If not, try placing it near the bottom.

Finally, here is the code:

There are two files inside the package. The PHP code goes in your theme’s functions.php file and the CSS code goes in your style.css file.

There is no styling to the code at all except what is default for certain elements with the current theme’s CSS. I included a CSS class called author_bio_section that you can work with to change how the box looks. There’s also an author_details CSS class for the paragraph tag that holds the image and the user description (or bio text). Also, there is an avatar class that gets created when using the get_avatar command. That can be modified to float the image to the right or left of the description for example.

In order not to interfere with functions from the theme and current/future plugins, it’s smart to include a unique prefix for all custom functions. I did that literally in this sample but you can change all instances of uniqueprefix to match the name of your site for example.

This function generates HTML dynamically based on the values pulled in from the author’s profile. It stores the HTML content into a variable. That variable is then output between the HTML5 footer tags. It only executes when viewing a post on the “single post” page.

It will default to using the user’s nick name if the display name is not found. Some description will contain “new line” characters, those are replaced by the HTML equivalent “br” tags as a result of the execution of the nl2br PHP function. Also, sometimes the use of HTML within user descriptions is disabled with a filter, so we remove that filter in the last line, so that HTML can be used in descriptions. In a lot of themes that code is redundant. It can be omitted safely if you feel the need.

In Conclusion

The above code generates a bio box that is plain Jane. Don’t forget to dress it up with some CSS if it isn’t looking the way you want it to. Also remember that there are other variables available to you that can be used within the above code. As an example, you can have icons to represent various social profile, author RSS, web site links etc.

You can link to the author archives with a built-in WordPress command and you can link to the Google+ profile of the author to help build Google Authorship. If you do that (Google Authorship) don’t forget the rel=author attribute. You will also need to link to the WordPress blog from the “Contributor To” section of the G+ profile. Plus, make sure the “by-line” on the WordPress site matches the display name in the G+ profile so Google can feel comfortable matching the author with the content. This G+ Authorship approach should work on single author and multi author WordPress blogs alike. Check the Structured Data testing tool to make sure things look as they should.