How to Make an Interactive jQuery Author Box for WordPress / WPMU

How to Make an Interactive jQuery Author Box for WordPress / WPMU

This is an interactive, cosmetic enhancement to your blog post template that will promote author recognition and interaction on your WordPress blog or WPMU blog network. It’s easy to add to your theme and requires very few modifications. The default styling offered in this tutorial will create an author box similar to the one pictured here:

authorbox

Check out my live demo.

You probably already have jQuery loaded in your theme, but if you don’t you’ll need to download it.

1. Make sure that you have jQuery and the two image files in your template directory’s images folder.

2. Open header.php and add this inside your tags:

{code type=php}
{/code}

Don’t call jQuery unless your template isn’t already loading it. There are a couple things that you can edit in this code: box height, width, and the duration of the effect.

3. Add the style for the box to your style.css file.

{code type=css}/* — Author Box — */
.authorbox {height: 100px; padding: 5px;}

.box {
list-style: none;
margin: 0;
padding: 0;
}

.box {
float: left;
padding: 10px;
display: block;
margin-right: 3px;
background: #eee;
border: 1px solid #ccc;
color:#555;
}

.box{
display: block;
overflow: hidden;
height: 82px;
width: 80px;
}

#a1{
width: 300px;
height: 82px;
}

#a1 p {font: 11px Helvetica, Arial, sans-serif; width: 280px; margin: 0;padding: 0;}
#a1 a {font: 11px Helvetica, Arial, sans-serif; text-decoration:underline; color: #000;}

.box img{
position: absolute;
border: 1px solid #ccc;
width: 80px;
height: 80px;
}

.boxes{
margin: 0;
padding: 0;
width: 300px;
display: block;
margin-left: 90px;

}

.boxed p {font: 11px Helvetica, Arial, sans-serif; width: 280px; margin: 0;padding: 0;}

.boxed a {font: 11px Helvetica, Arial, sans-serif; text-decoration:underline; color: #000;}

strong {font: 15px Helvetica, Arial, sans-serif;}

/* — End Author Box — */{/code}

Of course, you can modify any of these styles to match your template and preferences. You will more than likely need to adjust this according to the width of the column for your posts and the width that you set in the header.php file.

4. Edit your single.php file to include this somewhere after the < ?php the_content(); ? >

{code type=html}

{/code}

Inspiration for this post came from McBonio’s post at Webm.ag. I’ve replaced the images in the author box for some that I found to be more visually appealing, but the technique is the same. It has been tested for compatibility in IE6, IE7, IE8, Firefox, Google Chrome, Opera and Safari.