FOLLOW US

Blog

These articles are in reference to our original plugin, SlideDeck 1 PRO. If you are searching for articles related to our SlideDeck 2 WordPress Plugin, please check the blog category for SlideDeck 2 or search our Knowledge Base.

How-to: Loop through content with SlideDeck

By On November 24, 20104 Comments

Sometimes you want to loop through content in a way that the WordPress plugin cannot or it might be a little confusing if you aren’t using WordPress at all. Well, we’re here to help! This tutorial is the first in a series of how-tos for SlideDeck, offering integration solutions so you can keep creating!

Disclaimer: This particular tutorial is pretty advanced and requires knowledge of PHP and some knowledge of XHTML/CSS. Not all of our tutorials will be this advanced and we will try to keep all of them as simple as reasonably possible.

The paginated loop

Say you want to place a SlideDeck on your home page with the your most recent blog posts listed in groups of 4 on each slide of your SlideDeck. How do you loop through all of your posts and group them into groups of 4, creating a new slide after each group? This ends up being a fairly complex loop, but super useful for any kind of paginated content, not just SlideDecks.

Step 1: Setup your HTML

First things first, lets setup our HTML with some dummy content to determine how our markup will look after we have setup the loop. For this example we’ll use a simple group of link tags as our content on each slide.

<div id="slidedeck_frame" class="skin-slidedeck">
    <dl class="slidedeck">
        <dt>Slide 1</dt>
        <dd>
            <a href="link1">Post Title 1</a>
            <a href="link2">Post Title 2</a>
            <a href="link3">Post Title 3</a>
            <a href="link4">Post Title 4</a>
        </dd>
        <dt>Slide 2</dt>
        <dd>
            <a href="link5">Post Title 5</a>
            <a href="link6">Post Title 6</a>
            <a href="link7">Post Title 7</a>
            <a href="link8">Post Title 8</a>
        </dd>
        <dt>Slide 3</dt>
        <dd>
            <a href="link9">Post Title 9</a>
            <a href="link10">Post Title 10</a>
        </dd>
    </dl>
</div>
<script type="text/javascript">
    $('dl.slidedeck').slidedeck();
</script>
<noscript><p>Powered By <a href="http://www.slidedeck.com" title="Visit SlideDeck.com">SlideDeck</a></p></noscript>

So, as you can see here we have a simple SlideDeck with groups of four links of the title for each post – not too complex. I’m not going to go into how this should appear visually in this tutorial as our primary focus is the code necessary to create the automatic loop.

Step 2: Create the Loop

Now that we have the HTML markup base established, a goal of what we’re trying to create with our loop, lets create it! For the purposes of this example, I’m going to use WordPress and a WP_Query command to simulate getting the latest posts from our blog. You can see the code all put together below and each piece broken up and explained further down the post.

<?php
    $args = array(
        'cat' => 58,
        'post_type' => 'post',
        'post_status' => 'publish',
        'posts_per_page' => 20,
        'orderby' => 'date',
        'order' => 'DESC'
    );
    // Our incrementing counter, leave this set to 0
    $counter = 0;
    // Query the posts based off of the parameters in the $args variable
    $slidedeck_posts = new WP_Query( $args );
    // Our calculated limit of how many posts we have to work with, don't change this
    $slidedeck_posts_limit = count( $slidedeck_posts->posts ) - 1;

    // How many posts to display in each slide of the SlideDeck
    $per_page = 4;
?>
<div id="slidedeck_frame" class="skin-slidedeck">
    <dl class="slidedeck">

        <?php foreach( $slidedeck_posts->posts as $slidedeck_post ): ?>

            <?php
                $slide_number = floor( $counter / $per_page ) + 1;
                $slide_mod = $counter % $per_page;
                $slidedeck_post_ID = $slidedeck_post->ID;
                $slidedeck_post_title = get_the_title( $slidedeck_post_ID );
                $slidedeck_post_link = get_permalink( $slidedeck_post_ID );
            ?>

            <?php if( $slide_mod == 0 ): ?>

                <dt>Slide <?php echo $slide_number; ?></dt>
                <dd>

            <?php endif; ?>

                <a href="<?php echo $slidedeck_post_link; ?>"><?php echo $slidedeck_post_title; ?></a>

            <?php if( $slide_mod == ( $per_page - 1 ) || $counter == $slidedeck_posts_limit ): ?>

                </dd>

            <?php endif; ?>

            <?php $counter++; ?>

        <?php endforeach; ?>

    </dl>
</div>
<script type="text/javascript">
    $('dl.slidedeck').slidedeck();
</script>
<noscript><p>Powered By <a href="http://www.slidedeck.com" title="Visit SlideDeck.com">SlideDeck</a></p></noscript>

A single loop to break up your data into nice chunks on each slide. Again, keep in mind that while we are only outputting the title linked to the post, but you could put anything you want there such as the post thumbnail, an excerpt or any other data you have access to regarding the post. I recommend looking at the WordPress Function Reference and Template Tag Reference for more information about what you can get with WordPress post data. Now, on to what each of these pieces of code actual do…

Setup your data:

<?php
    $args = array(
        'post_type' => 'post',
        'post_status' => 'publish',
        'posts_per_page' => 20,
        'orderby' => 'date',
        'order' => 'DESC'
    );
    // Our incrementing counter, leave this set to 0
    $counter = 0;
    // Query the posts based off of the parameters in the $args variable
    $slidedeck_posts = new WP_Query( $args );
    // Our calculated limit of how many posts we have to work with, don't change this
    $slidedeck_posts_limit = count( $slidedeck_posts->posts ) - 1;

    // How many posts to display in each slide of the SlideDeck
    $per_page = 4;
?>

Here we setup the data to loop through. First we setup the arguments for the group of posts in the $args variable (the 20 most recent published posts) and pass that to the WP_Query() command to get our group of posts. Next we can set the $per_page variable to determine how many posts we want on each slide of our SlideDeck. The other variables ($counter and $slidedeck_posts_limit) should be left alone as they are used for calculating where to break the loop.

Start the loop:

<div id="slidedeck_frame" class="skin-slidedeck">
    <dl class="slidedeck">

        <?php foreach( $slidedeck_posts->posts as $slidedeck_post ): ?>

We will be looping through the slides so we need to start the loop within the <DL> tag so we are only creating new slide titles (<DT> tags) and slides (<DD> tags). The WP_Query object returns all kinds of data about the database query itself as well as the results. All we are concerned about is the posts themselves, so we will be looping through each $slidedeck_posts->posts.

Setup some variables for use in the loop:

<?php
    $slide_number = floor( $counter / $per_page ) + 1;
    $slide_mod = $counter % $per_page;
    $slidedeck_post_ID = $slidedeck_post->ID;
    $slidedeck_post_title = get_the_title( $slidedeck_post_ID );
    $slidedeck_post_link = get_permalink( $slidedeck_post_ID );
?>

Here we are setting up the variables we’ll be using in each iteration of the loop. The $slide_number variable is used to title each slide title tag (Slide 1, Slide 2, etc.). The $slide_mod variable is the modulo value of the incrementing $counter variable – this is used to determine where our groups of posts start and stop for each slide. The $slidedeck_post_ID, $slidedeck_post_title, and $slidedeck_post_link variables are all simple lookups to be used in the output for the ID of the post, the title and the permalink respectively.

Determine when to make a new slide:

<?php if( $slide_mod == 0 ): ?>

    <dt>Slide <?php echo $slide_number; ?></dt>
    <dd>

<?php endif; ?>

When using the modulo of an incrementing value it will return as a number between 0 and the second number in the modulo equation minus 1 (see the Wikipedia article for more information on the math behind this). For example, since we are paginating slides every 4 posts, the modulo will just loop 0, 1, 2, 3, 0, 1, 2, 3, etc. So, whenever the modulo value is zero we will start a new slide.

Output the slide content:

<a href="<?php echo $slidedeck_post_link; ?>"><?php echo $slidedeck_post_title; ?></a>

Each time we go through the loop we will output the information about the post that we want to be displayed. The end result is that we are looping through all the posts (as opposed to how many slides we want) and just inserting HTML markup to make (or close) a new slide whenever needed.

Determine when to close a slide:

<?php if( $slide_mod == ( $per_page - 1 ) || $counter == $slidedeck_posts_limit ): ?>

    </dd>

<?php endif; ?>

When looping through a series of paginated data like this, the most difficult thing to determine is when you need to close the surrounding HTML markup. You will need to close the slide on both the maximum modulo value ($slide_mod == ( $per_page - 1 )) of the $counter variable and when we have run out of posts ($counter == $slidedeck_posts_limit). This way though we asked for the last 20 posts, even if we only get 17 posts back, we’ll still close off the HTML <DD> tag even though we haven’t filled that last slide with 4 post entries.

Increment the counter and close the loop:

            <?php $counter++; ?>

        <?php endforeach; ?>

    </dl>
</div>

Here we increment the counter for each iteration in the loop and close up the loop, closing the HTML for the <DL> and container <DIV> as well to create well formed HTML markup for our SlideDeck.

You can use this code snippet on any website utilizing PHP, just change how you get the data to utilize the database methods your website’s platform uses. If you want to use this on your WordPress website, just copy and paste the code snippet into one of your template files where you want to display the SlideDeck. Make sure you have the SlideDeck plugin running and it will use the default SlideDeck skin automatically. You could also custom program your own CSS as well to create a great looking SlideDeck for your website.

Next time:

In our next tutorial we’ll talk about creating a secondary navigation like the dots navigation used in the Smart SlideDeck skin that comes with the SlideDeck WordPress plugin.

Questions? Comments? Ideas for future tutorials? Let us know in the comments below!

Related Reading:

Leave a Reply

Comments (4) Responses

  1.  

    jean page

    Confused, as of “step 1: your html structure” is this what’s going to be generated after the WP-loop has done it’s query?

    Thanks, Jean

    •  

      Dave

      Yeah, this is the structure of what will be output after we finish placing the PHP in to change our static content into dynamically output content in the remaining steps. I always recommend that you setup a layout in HTML and CSS first creating a solid HTML and CSS prototype for you to work with and a visualized end goal of how it should look when you’ve finished integration. This way you have something to compare against if your integration goes wrong somewhere.

  2.  

    fred

    Is the actual code available for download or could you put a copy button on each section.