Build a fancy WordPress author box

If you have a WordPress site or blog with multiple authors it might be useful to create a custom author box for each of them so the readers can get more information about the author and see their other posts etc. This tutorial is an extension of my Fancy Profile or Author Box tutorial from a couple of weeks back that customizes the author box to work with WordPress.

The final result

The goal of this tutorial is to create an author box like the one you see at the top of this article. The box above is the actual output of the working code and as you can see it works quite well. The box is conditional and activated by a custom field so it will only appear when you want it to. The bio is the standard profile bio entered in the WordPress user profile area. The name is the chosen display name of the user and links to the author index for the author. The website link opens the user defined website in a new window. The Twitter link goes to the user Twitter profile. And finally the image is the user Gravatar. The Twitter link is a bit wonky – I’ll get back to that later.

If you don’t want to go through the entire tutorial and learn how this all fits together just jump to the bottom of the article and get the source code.

Building the code

We already have the baseline for the code, both HTML and CSS, from the Fancy Profile or Author Box tutorial but this is going to be a dynamic box so we need to replace the static content with WordPress functions.

Let’s start with the baseline code:

Retrieving the dynamic author elements

To generate the dynamic content we are going to use a set of standard WordPress functions. These have changed over the last year or so and as a result the ones featured in many older tutorials are now deprecated.

To get the author bio we use the_author_meta():

To get the author Gravatar we use a custom code block that gets the user email address and retrieves the correct Gravatar based on that address:

To display the author name as a link to the author index page we use the the_author_post_link(). It’s an all-in-one solution that outputs the name with the correct link attached:

For the links to the author website and Twitter account we use the_author_meta() again interspersed with some plain text. Note that you have to combine several functions to get the name displayed as well as the link created:

's website

Follow  on Twitter

A caveat: The Twitter handle is a bit of a cheat!

If you look at the last line of the last code example you’ll see that for the Twitter name I’m actually calling the AIM value (AIM being America Online Messenger). This is because the standard WordPress profile page only asks for your e-mail, website, AIM, Yahoo IM and Jabber / Google Talk information. I wasn’t aware anyone was using AIM any more and I have a feeling this is a leftover from way back so I chose to use this field to output the Twitter handle because it has the least chance of anyone actually using it. There is a way to add Twitter and other handles properly but this requires the use of plugins – something I’m not a big fan of. If you’re interested there is some information on it in the WordPress Codex.

Putting it all together

Now that we have the source code and all the correct dynamic tags it’s time to put it all together. The end result (barring any changes you decided to make on your own) should look like this:

	

		
	
 
	

		
		

			 
		
 
		

			's website

									Follow  on Twitter
		
 
	
 
 

Making it conditional

If you cut and paste the code above into your page or post template it will appear in every page or post. Which I’m pretty sure is now what you want. To make it elective you need to make a conditional statement in the code. I do this by using Custom Fields, in this case a field with the name “author” and the value “true” or “false”:

ID, 'author', true))) { ?>
	

This small function asks “if this current post has a custom field with the name “author” that is set to “true”, do what I say”. That way your box will only appear if the custom field has been defined.

The final HTML/PHP markup

With the conditional statement in place the complete markup to be pasted into your theme file looks like this:

ID, 'author', true))) { ?>
	

		

			
		
 
		

			
			

				 
			
 
			

				's website

									Follow  on Twitter
			
 
		
 
	
 

Where to put the code

Like I said, this code has to be inserted into your theme files for the box to work. The easiest way to do this is actually to place it in a separate PHP file called something like “profile.php” and then call in from the theme files in question. That way you don’t have to edit the core theme files if you want to make a change to the box and adding it to new files means adding just one line of code.

If you placed this code (and only this code) in a file inside your theme called “profile.php” calling it from one of your core theme files is as easy as adding this one line of code:

/profile.php'); ?>

Where you insert it depends on where you want the box to appear in relation to your post content. If you want it to appear directly above you insert it before the the_content() function call. If you want it to appear after you insert it after and so on. Since you’re only inserting one line of code it’s easy to experiment and move it around for the best placement. And since the CSS is flexible width it will work properly pretty much regardless of the width of your post area.

The only thing to keep in mind is that the author box must be called from within the loop, otherwise it will not work.

The final CSS markup

The CSS markup for the author box is pretty much identical to the CSS in the original tutorial. I’ve just added some specifications to avoid conflicts. All you need to do is paste this into your styles.css file, get the blue background image file and place it in your theme image folder and make sure the call to the file has the correct image folder name.

/* AUTHOR BOX STYLES */

.profile {
	border: 1px solid #CCCCCC;
	position: relative;
}

.profileText {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	padding: 10px;
	line-height: 1.4em;
	text-align: justify;
}

.profileStats {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	text-align: right;
}

.profileStats img {
	position: absolute;
	right: 0px;
	bottom: 0px;
}

.profileName {
	padding-bottom: 5px;
	padding-right: 92px;
	font-size: 1.2em;
	font-weight: bold;
	color: #2e4672;
}

.profileName a {
	color: #2e4672;
}

.profileName a:hover {
	color:#24375B;
	text-decoration: none;
}

.profileJob {
	font-size: 0.8em;
	padding-right: 92px;
	padding-top: 5px;
	background-image: url('{image folder}/testimonialBlue.gif'); /* Remember to set the correct image folder here */
	background-repeat: repeat-x;
	height: 45px;
	color: #FFFFFF;
	line-height: 18px;
}

.profileJob a {
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: none;
}

/* END AUTHOR BOX STYLES */

That’s all there is to it. Have fun adding this box to your website or blog and customizing it to fit with your theme. And if you like, drop a comment below to show it off to the world.