Adding an About the Author Box to Your WordPress Posts

Digital magazines have become a popular commodity for today’s web users. With WordPress powering millions of blogs on the web today, it’s fair to assume they run a stable piece of software. Some of the best features are all internal as the WP team publishes live, updated documentation with each release.

Not only is the software very powerful but the underlying classes and functions give developers an all-access pass. It is extremely simple to develop apps and modules within WordPress. Today we’ll be looking into author meta data functions for building an “About the Author” box.

The Ultimate Designer Toolkit: 2 Million+ Assets

Envato Elements gives you unlimited access to 2 million+ pro design resources, themes, templates, photos, graphics and more. Everything you'll ever need in your design resource toolkit.

See More

Onextra Pixel Author box

Towards the end of single post pages you may frequently see a box explaining a bit about the writer. This will generally include their Gravatar or some sort of photo, a description about them, and possibly links to their profiles or personal website.

If things seems difficult check out some of WordPress’ documentation on template tags. These include much of what can be covered in this project and a whole lot more. The WP community also runs a very pleasant forum for in-depth system questions.

The WordPress Architecture

There is something referenced throughout WordPress code titled The Loop. This is a section where meta functions can be called based on a single article to pull down specific information from the database. As per our example we can call functions to pull out author data from any single post within The Loop.

Most notably this should be done within your template folder. For the lazy, it may be easier to edit individual files by adding code you’ll need. For example, the WP theme single.php file generally contains all code to parse on an individual posts’ page. You may find it easier to pull data while inside The Loop and add HTML code here.

Alternatively, a safer method would be to add a new file to your theme directory and include it whenever you’d want your author box to appear. This allows for greater control regarding variable terms and template files. This also saves you time and energy so as to not go back and re-invent the wheel.

WP Template Code

There aren’t many functions we’ll be using, though many could be new to WP amateurs. Below are just a few examples which you should familiarize yourself with. Much of what we’ll be covering works within the WordPress library with just a few key ideas – nothing that can’t be learned with a few hours of study.

<?php echo the_author(); ?>

The author function pulls data from within the loop to display the author’s name. This can be changed in the WordPress backend on anybody’s profile settings page. You are able to set this value to First/Last name, username, or even a custom set.

Freelance Switch Blog - Author Box

To make this process simpler, WordPress has released an entire function library for the_author_meta(). This replacement takes in arguments which can pull any author data from the database on request. You can check out the page documentation if you’d like to research more into the subject.

What’s fascinating about this function is how much information can actually be obtained. By default the function accepts two arguments: the type of data you need and the user ID to pull. The ID is an optional parameter which is only required in cases outside of The Loop. Possible values to pull include user_login, user_email, user_url, nickname, description (bio), jabber/aim/yim, and so much more!

Author Box after Web Design Tuts+ Network

What many don’t consider here is just how much potential information can be shared. WordPress allows for administrators to edit author profile pages to add in custom avatars, bios, and even home page links. These can then be pulled from the database and used as marketing information for each author.

With just these functions alone we are able to display all of the set data we will need. The only thing left to do is add our sample HTML and CSS code and publish the file!

Cordial Author Box Styles

CSS is an important language in our project scope, being a web application. We need to define specific sets of styles and display cases to incorporate for all major browsers, monitor resolutions, and other hidden variables. As web developers it is our job to study and work over these climates.

.aboutauthor { overflow: hidden; background: #f4f4f4; border: 1px solid #999; padding: 5px; margin-bottom: 10px; }
.aboutauthor img { background: 0px; border: 0px; padding: 0px; }
#aboutauthorimg { float: left; padding: 5px 0 5px 10px; }
.aboutauthor .span-desc { overflow: hidden; margin: 0px; width: 500px; float: left; }
.aboutauthor .span-2 {display: block; float: left; margin: 0px 10px 0 0; padding: 10px 0 0 10px; } 

The simple class .aboutauthor should be applied to your covering box. We have added a light background color with a solid border and extra padding. Our img tag is also displayed floating left with extra padding. This will keep our author’s avatar in line with box content.

Noupe Post Author Box

Further, we have two classes which demonstrate how we need our inner data to perform. .span-2 is a class held inside where our main content will be found. Inside here we have removed all extra margins/padding to keep spacing neutral, along with rearranging the box model for left alignment. This code would do best inside your template’s style.css file, though it could be added inline with your block element.

The HTML code is very short and similar as seen below. Here we have added a few extra functions which can be explained very quickly.

<div class="aboutauthor">
<div id="aboutauthorimg" class="span-2"></div>

<div class="span-desc">About Author: <strong><?php the_author(); ></strong>  (; Articles)
<strong><?php the_author_meta('display_name'); ></strong>
</div>

We are calling a function get_avatar() which takes a set of parameters. The two we have passed above are the current author’s e-mail address which is the unique identifier for a database query. This could be equivalent to a user’s ID, too. We also pass in 64 as a string value – this represents the size of the image we want returned squared off in width and height.

Mac AppStorm Author Profile Page

the_author_posts() is another fairly straightforward function which pulls the total number of articles a writer has published. This is more of an added feature as I don’t see many blogs running this info. Commonly, though, this is useful from a users’ perspective since it gives more information about the current author and deeper insight into their interaction with the blog itself.

These are just some of the basics techniques for building a simple WordPress author block. From here it’s very simple to save a new file, let’s say author-box.php into your themes folder and upload into your root directory. From there a simple PHP include can add all of your code right into any source automatically.

Chris Spooner SpoonGraphics Author Box
<?php include(get_bloginfo("template_url").'/author-box.php'); ?>

If this is still a bit fuzzy, check out the example code above. This would be the most direct way to include your file and sustain security in your actions. Here we are calling the get_bloginfo() function to pull our entire template directory structure out first, followed by our single data file. Be sure to rename this file to whatever will suit your theme best and don’t get confused between function calls!

Conclusion

Hopefully this tutorial has given you a starting point for reference in WordPress development. Blogs are all too common in today’s web, but adding an author box gives your online articles some flare. They also give incentive for authors to post more frequently and build up a small portfolio of their writing. Many of the most popular magazines online now feature detailed information and profile links from their article writers.

If you’d like to experiment with these features without messing around in PHP or HTML/CSS, there are a few alternatives. The WordPress plugins system is one such scenario which works perfectly. I recommend the Cool Author Box plugin which will automatically add author info and supports gravatar icons. Do you have any suggestions or tips for building unique author boxes in WordPress? Share your ideas in the discussion below.