Adding an About the Author Box to Your WordPress Posts

by on 29th July 2011 with 13 Comments

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.

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.


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.

About Author: (; Articles)

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

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.

Comments & Discussion

13 Comments

  • http://arifriyanto.com/blog Arif Riyanto

    Nice article, inspire me. thanks

  • http://www.kws.co.in Alpha

    Excellent observation. It would be great if you can post the SEO benefits of it ?

    Thanks

  • John

    But many times you see those author with company names or brand name with junk links just for the sake or SEO and link baiting. That to me is disgusting.

  • http://vsmarcuslewis.com Marcus Lewis

    Great tutorial. I’ve been needing to jump on an authors section with bio and list of posts. I have 2 authors for my site that write every once in a while and wanted to give them a little spot to add a description.

    Thanks for this!

  • http://www.sagive.co.il sagive

    gr8 stuff.. i think the right way is to first add some additional information boxes to the profile page so users can get creative.. that would actually get them to spend more time and get some pride out of thier profile. :)

    Cheers, Sagive

  • http://www.goodhotelguide.com Cindy Sherman

    Excellent post. Great job! Thank you.

  • http://pressabout.us/mozilla.org Carson Palmer

    Nice post. I was checking continuously this blog and I am impressed! Very helpful information specially the last part :) I care for such info a lot. I was seeking this certain info for a very long time. Thank you and best of luck.

  • http://fitnessanddefense.com Ronnie Coleman

    Can you guide me how to do this in Thesis ??

  • http://techmunchies.com abhishek@techmunchies.com

    Thanks buddy for your help :) .I needed this.

  • http://www.blagdon.com Blagdon

    Beauty! Keep up the good work.

  • http://www.sellwithppc.com Frank

    Great Post! Nice to learn new things from wonderful posts like this. Keep posting.

  • http://www.jehovasoft.com/ Beslin

    Nice Article. Keep Posting!

  • http://www.thecafeatporlockweir.co.uk Sarah

    Very helpful instructions … just what I was looking for. Thank you for posting.

Subscribe
Membership
About the Author