How to Add a Carousel to Your Thesis Blog

If you’ve spent any time visiting blogs lately chances are you’ve seen those small little photo’s accompained by a title or bit of text in or near the masthead. I’m not sure if it has a proper name, but most people I’ve talked to call it a carousel, in this tutorial I’m going to show you how to add one to your blog.For the few of you who don’t know what I’m talking about, here’s a screen shot from gawker.com which is the first place I saw it being used.

7262009_22442 PM

As time goes on the stories move across the banner,  eventually dropping out of view, similar to the way horses do on a carousel. I’m going to be showing you how to do this with Thesis, as with many of these tutorials you can adapt the programming to work with any blog, it’s just easier with thesis. 🙂

First we’re going to need a way to isolate which posts we want to appear in the top. Chances are you are going to want to pick the best of your newest posts (not all new posts are best). I like to keep my blog low maintenance or self maintaing, so I decided to use the featured category which is the same I use to fill the visual slider that’s on the homepage. However you could just as easily use tags instead of an isolated category.

To make the carouse happen we’re going to create a custom function in custom_functions.php called top_carousel() and inside of it we’re going to add global $post (which allows wordpress to get items outside of the current post) and an “if” statement to make the carouse appear only on single post pages (I felt the homepage looked to “busy” with a slider and a carousel, but that’s your choice). Here’s what the initial code looks like:


function top_carousel(){
global $post;
if (is_single ()){
}
}

Next we’re going to add a “wrapper” for carousel this will allow us to add some visual styling once we’re done:


function top_carousel(){
global $post;
if (is_single ()){
echo '<div id="topcarousel">';
echo '</div>';
}
}

Next we’re going to need to construct a database select statement that selects only the posts we want. In my case, I wanted the last 6 published posts, from the “featured” category, in reverse date order. To do that we’ll use the following query

$the_query = new WP_Query(array(
'category_name'=>'featured',
'orderby'=>'date',
'order'=>'DESC',
'showposts'=>'6'
));

Explaining the intricacies of WP_Query is beyond the scope of this post however you can read more about it on wordpress or lots of other tutorials on the web. However hopefully it’s easy to reverse engineer, select only posts from the “featured category”, order them by date, in descending order, and select a maximum of 6 posts.

Next we need to display the posts based on that query, here’s how we do it:

while ($the_query->have_posts()) : $the_query->the_post(); $do_not_duplicate = $post->ID;
$image = get_post_meta($post->ID, 'thesis_post_image', $single = true);
echo '<div class="carouselu">';
echo '<a href="';
echo the_permalink();
echo '" >';
echo '<img src="http://graywolfseo.com/wp-content/themes/thesis-wolf/lib/scripts/thumb.php?src='.$image.'&w=140&h=140&zc=1&q=100"></a>';
echo '<a href="';
echo the_permalink();
echo '" >';
echo the_title();
echo '</a>';
echo '</div>';
endwhile;

That bit of code executes the previous SQL query, display’s the thesis picture for that post, resize it down to a 140×140 square, links it to the permalink for the post, then display’s the title as a link to the permalink as well, and wraps the whole thing in a “div”.

There’s only one last bit, since we are going to use CSS to float the individual carousel unit DIV’s, we’ll need to make sure we clear the float’s when we are done like this:

echo '<div style="clear:both"></div>';

Ok now to put it all together, it should look something like this:


function top_carousel(){
global $post;
if (is_single ()){
echo '<div id="topcarousel">';
$the_query = new WP_Query(array(
'category_name'=>'featured',
'orderby'=>'date',
'order'=>'DESC',
'showposts'=>'6'
));
while ($the_query->have_posts()) : $the_query->the_post(); $do_not_duplicate = $post->ID;
$image = get_post_meta($post->ID, 'thesis_post_image', $single = true);
echo '<div
class="carouselu">';
echo '<a href="';
echo the_permalink();
echo '"  >';
echo '<img src="http://graywolfseo.com/wp-content/themes/thesis-wolf/lib/scripts/thumb.php?src='.$image.'&w=140&h=140&zc=1&q=100"></a>';
echo '<a href="';
echo the_permalink();
echo '"  >';
echo the_title();
echo '</a>';
echo '</div>';
endwhile;
echo '<div style="clear:both"></div>';
echo '</div>';
}
}

Only 2 steps left, we need to add this code to custom_functions.php to tell thesis when to activate and display the carousel, we do that like this:
add_action('thesis_hook_before_header', 'top_carousel');

Then we need to add a bit of styling to our custom.css file, in my case I used this:
#topcarousel {border:1px solid #efefef; padding: 0px;padding-left:10px;}
.carouselu {width:150px;float:left;padding:3px;text-align:center;}
.carouselu IMG {border:2px solid #ccc;display:block;}

That wraps a light gray border around the entire top carousel and puts a bit of padding in place, then sets a 150px width for each of the “carousel units” with a bit of padding and “floats” them so they appear side by side, and then puts a light gray box around the image in the carousel and make sure no single letters creep into the display. If you did everything right it should look like the screen shot below:

7262009_32157 PM

That code is pretty bare bones and there’s lots of opportunity for you to improve/change it, here are a few suggestions:

  • Have the first one or two slots fill from a different tag/category, if you have any sort of “news” content on your blog, that would be really useful.
  • Look at the tag/category of the current post and choose related posts for the last one or two slots, this should dramatically increase CTR.
  • Change the position of the carousel for example Techcrunch currently mixes it into the “content” block, the New York Times puts it at the bottom of the article.
  • Use multiple carousel’s in the sidebar or after the post, to display related posts.

Thanks to Sean Percival for writing about carousel’s last week and inspiring me to get off my kiester and figure out how to do it, and thanks to Nick Reese who helped with a coding issue, you might also want to check out some of his thesis tutorials.

While this tutorial isn’t a programming masterpiece, it might be a bit beyond you if you have very little programming experience. However if you’ve been wondering is Thesis just for “newbies” I hope these last few thesis tutorials have shown you thesis really is a framework that makes it easy for you to interact with your blog and get things done quicker and easier, no matter how experienced you are, so why not give it a try?

GraywolfSEO.com runs on the Genesis Framework

Genesis Framework

Genesis lets you to quickly and easily build amazing websites with WordPress. Whether you're a novice or advanced developer, Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.
It's that simple - start using Genesis now!


Take advantage of the 6 default layout options, comprehensive SEO settings, rock-solid security, flexible theme options, cool custom widgets, custom design hooks, and a huge selection of child themes ("skins") that make your site look the way you want it to. With automatic theme updates and world-class support included, Genesis is the smart choice for your WordPress website or blog.


tla starter kit

Advertisers:

  1. Text Link Ads - New customers can get $100 in free text links.
  2. BOTW.org - Get a premier listing in the internet's oldest directory.
  3. Need an SEO Audit for your website, look at my SEO Consulting Services
  4. TigerTech - Great Web Hosting service at a great price.
More in Blogs, Featured, ntt
Using Tags for Better Ad Targeting on Your Blog

When you're running a blog with affiliate links, one of the key factors that can increase your conversions, help you...

Checking for Broken Links and Link Rot and the Importance of Good Site Architecture

Recently I've been experimenting with a plugin for checking broken links, on several of my blogs, and I'm fascinated by...

How I Handle Backups and Disaster Recovery

After reading about Lisa Barone's laptop being stolen, I got into a bit of a discussion about how I use...

Close