Using Nivo Slider with WordPress Custom Post Types

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.

10 responses

  1. You can also use a custom function
    to have a control of the numbers of words instead of . You can change 25 to any numbers.

    Make sure to add this in functions.php

    function new_excerpt_length($length) {
    return 200;
    }
    add_filter(‘excerpt_length’, ‘new_excerpt_length’);

    function smart_excerpt($string, $limit) {
    $words = explode(” “,$string);
    if ( count($words) >= $limit) $dots = ‘…’;
    echo implode(” “,array_splice($words,0,$limit)).$dots;
    }

  2. Jinson Abraham Avatar
    Jinson Abraham

    Its really a clever trick. Thanks for taking the time to put this together.

  3. weird. When I try to use this, it shows six slides even though it is only set to show four. If I change it to one, it shows two. What gives?

  4. Hi, I have an issue. With the above code, calling two separate loops, it is doubling my slides. So for every one slide added, two of each are displayed. Is there any way to combine all of that into one single loop?

    Thanks for your help!

    1. Jasper Avatar
      Jasper

      I have the same issue. Did you ever fix this issue of having slides loading twice?

      1. Are you calling the thumbnail or featured image in the second loop. Notice this loop does not have the featured image only the content for the image caption.

  5. nivo but jQuery Plugin or wordpress plugin ?
    thank you

    1. jQuery plugin.

  6. Hi Mark, are you using the WordPress plugin version or stand alone?

    1. This is the stand alone version Peter. I have it in a scripts folder in my theme.

Leave a Reply

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