I have been using the Nivo Slider for a while on a number of sites, mainly using a function to grab all the images from a particular WordPress post or page and then showing these in the Nivo Slider. Then I found out that it could take HTML for the captions and therefore wanted to use this for a “Featured Content” slider on a website. The featured content post would be a WordPress custom post type. Here is how I did it.
The first stage is to install the Nivo Slider onto your WordPress theme following the excellent and simple to follow instructions provided by the author at dev7studios.com. Once this has been completed and you are happy that the Nivo Slider works correctly then we can start with the fun stuff, by making it show information from our custom post type. In this example I named by custom post type ‘rs_featured’. You should always prefix your custom post types.
In order to display the images in the slider I wanted to make use of the WordPress featured image function which using the_post_thumbnail() in your themes template files – in my case header.php. The first step is to set up a new WP_Query in order to provide us with a custom loop to query posts from our rs_featured custom post type. To do this I used the following code:
<?php
$pj_slider = new WP_Query('post_type=rs_featured&showposts=4'); while($pj_slider->have_posts()) : $pj_slider->the_post();
// we will do stuff in here later
endwhile;
?>
What this does is that it queries the latest 4 posts from our custom post type. Now we have to decide what we are going to show for each of the posts that are returned and then add this code inside the above loop. With the Nivo Slider instead of using the images title as the caption text you have the options of using HTML. To do this you need to set the title attribute of the image to a unique CSS ID for each of the posts. To do this we will use the posts ID as this is always unique. Therefore I set up the following variable to store the CSS ID that I wanted to attach to the title.
<?php $pj_slider_caption = '#slider-caption-'.get_the_ID(); ?>
We now have a the unique ID setup. Therefore we can go back our code above and add the image from the posts featured image so that this shows for each of the posts in our custom post type. The code for the loop should now look like this:
<?php $pj_slider = new WP_Query('post_type=rs_featured&showposts=4'); while($pj_slider->have_posts()) : $pj_slider->the_post(); ?>
<?php $pj_slider_caption = '#slider-caption-'.get_the_ID(); ?>
<?php if(has_post_thumbnail() ) { ?>
<?php the_post_thumbnail('slider', array('title' => ''.$pj_slider_caption.'')); ?>
<?php } ?>
<?php endwhile; ?>
We pass the new caption ID to the title attribute of the featured image inside the_post_thumbnail() function as an array. The next stage is to set up a DIV that uses the same ID we created above (#slider-caption-theid) as well as the class nivo-html-caption. As we need one of these divs for each of the posts in the loop, so we need a secondary loop, which is similar to the first. The code for this, to be placed underneath the first loop which shows the images is as follows:
<?php $pj_slider_caption = new WP_Query(‘post_type=rs_featured&showposts=4’); while($pj_slider_caption->have_posts()) : $pj_slider_caption->the_post(); ?>
” class=”nivo-html-caption”>“>Read more about this feature »
<!– // nivo-html-caption –>
<?php endwhile; ?>
We are using the posts excerpt as the captions content as well as the post title above the content. Now all you need is to use CSS in order to position and style the caption area as required. This has provided a really useful piece of code and I will no doubt be using it on a few more sites to come. Thanks to Dev 7 Studios for a great jQuery slider.
Leave a Reply