Thesis Quickie: Add animated testimonials to your sidebar

On a recent PSD to Thesis project I needed to add testimonials to the sidebar. To make this feature a bit more interactive, I decided to use a sprinkling of jQuery to create an animated fader effect. Here’s how it was done:

Step 1 – The jQuery

You’ll need to create a new JavaScript file in your Thesis ‘custom’ folder, called fader.js. Because jQuery is already included with both WordPress and Thesis, you don’t need to include the jQuery library. So, in your fader.js file, add the contents of this file. Then save your fader.js file to your webserver and open your custom_functions.php file.

Step 2 – Call the jQuery file

In your custom_functions.php file, you’ll need to add the following function:

// jQuery header fader
function head_scripts() {
?>
<script type="text/javascript" src="<?php bloginfo(&amp;#39;stylesheet_directory&amp;#39;);?>/custom/fader.js"></script>
<script type="text/javascript">
	   jQuery(document).ready(
				function(){
					jQuery(&amp;#39;#testimonials&amp;#39;).innerfade({
						animationtype: &amp;#39;fade&amp;#39;,
						speed: 1000,
						timeout: 8000,
						type: &amp;#39;sequence&amp;#39;,
						containerheight: &amp;#39;370px&amp;#39;
					});
			});
</script>
<?php
}

add_action(&amp;#39;wp_head&amp;#39; , &amp;#39;head_scripts&amp;#39;);

What this does is add the call to your fader.js file in your Thesis header and adds the animation effect to a div with an id of testimonials. Now we need to add the testimonials to our sidebar. The easiest way to achieve this is using a widget. So save your custom_functions.php file and open your WordPress admin panel.

Step 3 – The Testimonials widget

In the Appearance>Widgets pane of your WordPress admin panel, add a new text widget. Within the widget, you’ll need to add an HTML unordered list. Here’s an example:

<ul id="testimonials">
	<li>This is my first testimonial. The client was very happy with my work. <span class="author">Joe Q Public</span></li>
	<li>I was so happy with the project that I overpaid. Who would have thought? <span class="author">Fred Bloggs</span></li>
	<li>I want to marry you Dave, and have your children... <span class="author">Angeline Jolie</span></li>
</ul>

Save your widget and take a look at your sidebar in the front-end of your site. If you’ve done everything properly you should see an unstyled list of testimonials.

Step 4 – Add some style

Open your custom.css file (it’s in the custom folder of your Thesis installation). Add the following code to style your testimonials list.

ul#testimonials {
	margin: 0;
	padding: 0;
}

ul#testimonials li {
	margin: 0;
	padding: 0;
	list-style: none;
}

ul#testimonials li span.author {
	font-style: italic;
}

That’s it. You don’t need to limit this to testimonials of course. It would work quite well for images or blocks of text, and it doesn’t have to be inserted into a widget. The same code can be applied to a Post or a Page. Enjoy!