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:

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:

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/jquery-1.3.2.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
lastBlock = $("#a1");
maxWidth = 350;
minWidth = 75;
$(".box").hover(
function(){
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
lastBlock = this;
}
);
});
</script>

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.

/* -- 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 -- */

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(); ? >

<div class="authorbox">
<div class="box">
<div id="a1">
<a href="<?php echo get_bloginfo('url') . '/author/' . get_the_author_meta('login'); ?>"><?php echo get_avatar( get_the_author_id(), '80'); ?></a>
<div class="boxes">
<p><strong>About</strong><br/>
<?php the_author_description(); ?>
</p>
</div>
</div>
</div>
<div class="box">
<div class="boxed">
<img src="<?php bloginfo('template_url'); ?>/images/link.jpg" />
<div class="boxes">
<p><strong>Website</strong><br/>
<?php if (get_the_author_url()) { ?><a href="<?php the_author_url(); ?>">Visit <?php the_author(); ?>'s website</a><?php } else { } ?>
</p>
</div>
</div>
 </div>
<div class="box">
<div class="boxed">
<img src="<?php bloginfo('template_url'); ?>/images/write.jpg" />
<div class="boxes">
<p><strong>Posts</strong><br/>
<?php the_author(); ?> has made <?php the_author_posts(); ?> posts here at <?php bloginfo('name');?>
</p>
</div>
</div>
</div>
</div>

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.

Tweet This Post