WordPress how to video : flexible Thesis slideshow

This is a 2 part video tutorial to guide you through the process of adding a featured posts slideshow to the Thesis theme using the Jquery Cycle Lite plugin and Query Posts plugin.

If you want to show the post title and excerpt, just remove the overflow:hidden CSS declaration and position the title and excerpt relative.

Add the Nivo Slider to the Thesis WordPress theme

I’m working on a customization of the Thesis theme for a client.
A popular feature of modern websites is the featured posts slider. So I decided to use the Nivo slider, which is lightweight and has nice transitions.
To do this, first you need to edit custom_functions.php and add this code:

add_action('thesis_hook_before_content_box','do_nivo_slider');

function do_nivo_slider(){

if (is_home()){
print '<div id="sliderwrap">';
?>

<div id="slider">

<?php $sub_loop_1 = new WP_Query('category_name=featured');
while ($sub_loop_1->have_posts()) : $sub_loop_1->the_post();
global $post;
?>

<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('full', array('alt' => get_the_title(), 'title' => get_the_title())); ?>
</a>
<?php wp_reset_query(); ?>
<?php endwhile; ?>
</div>
</div>
<?php }

}

and activate post thumbnails

if ( function_exists( 'add_theme_support' ) ) { // Added in 2.9
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 200, 200, true ); // Normal post thumbnails
add_image_size( 'hp-post-thumbnail', 511, 231, true ); // Homepage thumbnail size
add_image_size( 'single-post-thumbnail', 511, 9999 ); // Permalink thumbnail size
}

then add this to the Thesis Page Options > HomePage Options > Javascript box


jQuery(window).load(function() {
jQuery('#slider').nivoSlider();
});

and check JQuery checkbox

I haven’t figured out how to use wp_enqueue_script and wp_enqueue_style with Thesis yet, so I used the absolute paths.
Usually I’d include all the javascript in the functions.php file

Copy the CSS from the nivo slider CSS file and paste it into your custom.css.
Here also I’d rather include the extra CSS file somehow.