Case Study: Building an ‘About the Author’ Box in WordPress 3.2

I’m sure those of you familiar with WordPress blogs have seen the many author box designs. Most of the popular web design and social media magazines feature some type of author display box towards the bottom of each post. This features the author name, avatar, and generally a short bio along with profile links.

WordPress users who are up to date with the latest 3.2.x release can easily implement this feature via custom plugins to extend WP functionality. But I want to explain how you can custom-code your own author box! I feel this method gives you more control over the layout and you can manipulate the HTML/CSS much further than with plugin codes.

The Case Study Details

For this particular tutorial I’ll be referencing the work done on DesignMag’s template. If you check out the bottom of each post you should notice a new author box design implemented just towards the last week in October.

I have included the author name and avatar along with some generic WordPress functions. Using some WP easter eggs I also created a smaller label which tallies the total articles each author has written and links to their personal author page. I advise using something similar to this if only to give each author some more spotlight in search engines.

There are also some other additions we could include, such as a custom Facebook or Twitter URL outside of the bio. But without overly-complicating things let’s focus on building a similar product as seen in our webpage design.

Static HTML Code

To start off let’s focus solely on building the framework for our author box. If it helps save an HTML template of a single blog post from your website to work with, like a development sandbox. In this way you don’t need to mess around with the WordPress theme files(yet) and no need to worry about PHP code, either.

[cc lang=”html”]

[/cc]

Since the HTML block is rather small I’ve broken it into 2 segments. Hopefully in this way it’ll be easier to explain each part. In the above portion the ID #post-author-box is used as an overall wrapper to add an outer border effect onto the whole box itself. I’m also going to use some padding so the internal elements are spaced away from the edge border.

The inner div only contains two(2) classes silkwrapper and clearfix. The silkwrapper is mainly a covering class to style and contain all internal content. Since the layout is split into 2 columns I also included a clearfix so the float behavior doesn’t bug out in older browsers. Now inside of this div I’m using two HTML5 section elements for the left and right area, respectively.

[cc lang=”html”]

Author: Authors Name

Articles: Total of 999 posts

Real simple basic information here. Pull directly from the WordPress backend.

[/cc]

#post-author-image is the ID set to our first section. This floats to the left side and houses only our author avatar image. WordPress directly ties into Gravatar so your authors may not even need to edit their image by default. Alternatively #post-author-box-content also floats left but each section is given a specific width to limit run-off from the inner content.

Styles and CSS Properties

We actually don’t need to apply a whole lot of CSS rules here. Most of them you should be familiar with but I’ll cover any new or possibly confusing areas in the code.

[cc lang=”css”]#post-author-box { display: block; padding: 4px; margin-top: 15px; border: 1px solid #e0dfde; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; margin-bottom: 35px; }
#post-author-box .silkwrapper { background: #eeeeee; padding: 9px 11px; }
[/cc]

The #post-author-box uses CSS3 border radius properties for rounded corners within the external border. I’m using all the standard properties for -webkit, -moz(Mozilla), -o(Opera), -ms(Internet Explorer 9+) and the regular border-radius. The silkwrapper class has a slightly darker background to stand out among the plain white page content.

[cc lang=”css”]#post-author-box-content { display: block; float: left; height: auto; position: relative; width: 440px; padding-top: 9px; }
#post-author-box-content h2 { display: block; font: 1.4em/1.0em bold “Trebuchet MS”, Arial, sans-serif; color: #4d4d4d; text-shadow: 0px 1px 1px #fff; margin: 0 !important; padding-bottom: 8px; }
#post-author-box-content h2 span { color: #275081; }
[/cc]

The box content includes an H2 and H3 element for the author name and total posts listing. I am using another CSS3 property text-shadow to add a unique effect into the top content, similar to Apple’s chrome letter styles. The author’s name is wrapped in a <span> tag which gives this text a particular shade of dark blue, jumping out from the rest of our content.

Designing the Avatar Image

This last bit of CSS isn’t particularly confusing, although it can be frustrating when you go to implement this code into WordPress. The PHP functions required to pull avatar images do not let you add another class or ID into the element. This means you cannot target the image directly without housing it inside another wrapper. Check out my styles below:

[cc lang=”css”]#post-author-image { display: block; float: left; width: 155px; }
#post-author-image img { background: #f3f3f3; padding: 3px; border: 4px solid #dddbd7; }
[/cc]

The #post-author-image section is limited at 155px in width. Gravatar maxes out at 256×256 height and width for any image. We’ll be pulling the avatar at exactly half these dimensions (128×128) so 155px leaves breathing room between the right content area.

Also I’m using both a background with padding and a border for a fancier display. The padding is 3px all the way around so our background appears to come out 3 pixels on each side. The border is 4 pixels wide which also expands evenly on each side. This will add about 15px to the width, but 155px total should still hold everything. If not you can always re-size the avatar or increase the #post-author-image section to 160px or 170px.

Applying Code to WordPress

If the example styles are still confusing just check out our stylesheet to see the full code details. Additionally you are not required to duplicate your box exactly as we have done here on DesignMag. Use your designer’s judgement and include styles which match your own blog theme the best.

Now that everything is coded and styled we should replace the default HTML content with WordPress PHP functionality. To save space I included the whole code block below with replacement PHP snippets. Inside the current theme directory I made a new authorbox.php file which will contain just this code bit, which we can then include into WordPress’ single.php for single blog posts.

[cc lang=”php”]

[/cc]

I’ll give a quick overview of each function at play here. If you understand PHP and WordPress there shouldn’t be much confusion and you can always check the WP Codex for additional info.

• get_avatar() – Here we output a plain HTML image using the current author’s e-mail address. The second parameter defines a numeric height/width in pixels for Gravatar to return(max 256px).
• the_author_meta(‘display_name’) – the_author_meta() is a general function used within any WordPress loop. You pass in a key value and the output returned is specific to the current author metadata. In this scenario the author’s display_name is output which can be set from their profile page.
• the_author_meta(‘user_login’) – similar to the above function except in this scenario we need to append the username to hack together an author URL. By default WordPress uses /author/username/ for these pages so it’s rather easy to put together a custom anchor. Note that get_author_posts_url() is another option, but this requires parameters which will just muck up our code even more.
• the_author_posts() – easy as pie here! We are just outputting the total number of posts this author has written and published.
• the_author_meta(‘description’) – this last meta function will output a paragraph of text from the author’s bio section. This will support HTML tags such as anchor links. Author’s are generally encouraged to include their website or Twitter links here.

Completing the Process

For some web server setups you may not be able to include an external PHP file because of security settings. This means even though authorbox.php is in the same directory an include() function may fail outright. Add the following into your single.php and check if it works or not.

<?php include (get_bloginfo('template_url')."/authorbox.php"); ?>

Assuming this works then congrats on the new setup! But if you’re getting hit back with PHP errors you may consider moving all your code from authorbox.php right into single.php. To do this select all the code from your authorbox and cut/paste into the same area in your single.php, and don’t forget to delete the include() call! Save & reload the page and assuming your code is within the WP loop everything should work perfectly!

If you end up building your own custom author box style we would love to check it out! Just let us know your website URL in the discussion area, along with any cool tips you picked up during the process.