Create A jQuery Powered Author Box For Wordpress

Posted in Tutorials | On 12th January 2010 | 16 Comments

Get a free VECTOR Image of the week from Shutterstock.

Get hundreds of free PHOTOS from Pixmac.

Today I’m going to show you how to make a jQuery powered sliding author box for Wordpress.

Using an author box in your blog can be a great way to tell your users a little about yourself and of course link to your personal/business website, you can fill out your author information from your WP Admin panel (Users > Authors & Users.)

First thing we need to do is grab the latest copy of jQuery, which you can get here: http://jquery.com

You can get the images used in this tutorial in the download package at the end of the article.

We will be editing header.php, single.php and the stylesheet, so please be sure to back up these files, once you have edited a file please save it as changes will not be applied.

How it Looks

Upload

We need to upload jquery-1.3.2.min.js, and the two image files to your template directory.

Header

Open header.php and between the <head> tags please insert the following code:

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

This calls jQuery from your template directory and allows the box to slide, you can change the box height and width settings and duration in this code.

Stylesheet

Somewhere in the stylesheet please insert the following styles for the box:

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

You can change the box dimensions, colours, fonts etc.. in the stylesheet to match it up with your theme.

Single

Open single.php and insert the following code which allows your author box to be displayed, somewhere after <?php the_content(); ?> would work well:

<div>
<div>
<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>
<p><strong>About</strong><br/>
<?php the_author_description(); ?>
</p>
</div>
</div>
</div>

<div>
<div>
<img src="<?php bloginfo('template_url'); ?>/link.jpg" alt="link" />
<div>
<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>
<div>
<img src="<?php bloginfo('template_url'); ?>/write.jpg" alt="write" />
<div>
<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>

This lays the boxes out for you in your posts, you can change the boxes content, titles or images in this section of code.

Know Issues

The only issue that springs to mind is the jQuery version, it may conflict/not function with older versions of jQuery and if your using jQuery with plugins/widgets or within the theme itself again it might conflict/not function.

Compatibility

Tested in IE6, IE7, IE8, Firefox, Google Chrome, Opera and Safari.

Download

I have included the images used in this tutorial and a PHP file named “authorbox.php” which contains the code used in this tutorial.

You can also just upload the image files, jQuery and authorbox.php to your template directory and include it in your single.php like so (But I would recommend implementing it properly as stated above ):

<?php include 'authorbox.php'; ?>

Demo | Download Files

McBonio

McBonio is a full time web designer, blogger and general web lurker. He runs Tropica Web Design, which is a web agency based in Liverpool, UK. You can also catch McBonio at Twitter: @mcbonio

Visit McBonio's website

Like this post? Share it!

16 Comments

Michael Pehl
January 12, 2010

That’s very nice. Will add it to my little blog

Thank you for sharing this!!!
Wow! Awesome…
I will add this to my site…

Thx..