I’m not going to cover how to set up the carousel using the jcarousel jquery plugin by Sorgalla because there is enough instruction out there on how to do it. However I am going to show you how to use this carousel to display an image based archive carousel in WordPress.

The code

$archives = wp_get_archives(array('echo' => 0,'format'=>'html','type'=>'monthly','before'=>'|'));
$archive = explode('|',$archives);
$remove = array_shift($archive);

foreach($archive as $i):
$i = strip_tags($i);
$month = preg_replace('/[^a-z]/i', '', $i);
$month_int = date('m', strtotime($month));

if ($month === "February") $month_int = 2; //fixes weird PHP bug

$year = preg_replace('/[^0-9]/i', '', $i);

$query = new WP_Query('meta_key=_thumbnail_id&posts_per_page=1&monthnum='.$month_int.'&year='.$year.'&paged='.$paged);
while ($query->have_posts()) : $query->the_post();


<!--?php <br ?--> endwhile;

The above code is what you would want to place inside of the main ul which holds your carousel.

How it Works

The wp_get_archives() function in WordPress by default will return an archive based list in the format of “February 2011, January 2011, etc”. Using the ‘before’ parameter we are able to insert an element at the beginning of each list item which we can then use to break our list into an array using the explode function in conjunction with the before parameter from wp_get_archives as the delimiter.

Using the before parameter as a delimiter actually creates a an null value in the first array position. To fix this we use the array_shift function to remove the first array item and recalculate the positions starting at zero.

Next we loop through the array values [0]=>February 2011 [1]=>January 2011, etc and perform two separate preg_replace functions to isolate the month from the year. After turning the month name into the corresponding integer ( e.g. January -> 01 ) we can use the integer values for the month and year to perform a custom loop that will query these dates

new WP_Query('meta_key=_thumbnail_id&posts_per_page=1&monthnum='.$month_int.'&year='.$year.'&paged='.$paged);

Notice that in this query we are only pulling posts that have


so that none of our carousel items come back blank. We also only return one post per page so that only one thumb represents each month/year combo.

Finally we just loop through and setup the category link, the archive title, and thumbnail

<!--?php while ($query--->have_posts()) : $query->the_post(); ?>

<!--?php endwhile;?-->

PageLines Carousel Hook

If you are using PageLines you can easily use the above code as it is in conjunction with the pagelines_carousel_list action hook that works with the default carousel section so that you can use custom carousel content as we did above.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop us a note so we can take care of it!


All entries, chronologically...