I've searched around and I haven't been able to find a solution for exactly what I'm trying to do.

I have this basic JavaScript slider from w3c that displays one slide at a time. I'm trying to get each slide to display a different post from a specific category from the loop. Slide #1 should contain the most recent post, slide #2 should contain the second, and slide #3 should contain the third.

This is what I have right now, but it only displays the first post in each of the slides:

<div class="slideshow-container">

        <div class="mySlides fade">
            <div class="numbertext">1 / 3</div>
            <?php
            query_posts("current_post=0&showposts=1&cat=1"); ?>
            <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
                <a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
                    <?the_post_thumbnail( 'large' ); ?>
                </a>
            <div class="text"><?php the_title(); ?></div>
            <?php endwhile; else : ?>

                <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>

            <?php endif; ?>
            <?php wp_reset_query(); ?>
            <?php rewind_posts(); ?>
        </div>

        <div class="mySlides fade">
            <div class="numbertext">2 / 3</div>
                <<?php query_posts("current_post=1&showposts=1&cat=1"); ?>
            <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
                <a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
                    <?the_post_thumbnail( 'large' ); ?>
                </a>
            <div class="text"><?php the_title(); ?></div>
            <?php endwhile; else : ?>

                <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>

            <?php endif; ?>
            <?php wp_reset_query(); ?>
            <?php rewind_posts(); ?>
        </div>

        <div class="mySlides fade">
            <div class="numbertext">3 / 3</div>
                <<?php query_posts("current_post=2&showposts=1&cat=1"); ?>
            <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
                <a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
                    <?the_post_thumbnail( 'large' ); ?>
                </a>
            <div class="text"><?php the_title(); ?></div>
            <?php endwhile; else : ?>

                <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>

            <?php endif; ?>
            <?php wp_reset_query(); ?>
            <?php rewind_posts(); ?>
        </div>

        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
        <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>

I'd like to accomplish this without a plugin, so my client can just tick the "Featured" category and have the post show up there.

Thank you!

up vote 1 down vote accepted

You should use WP_Query() instead of query_posts. You also don't need a separate query to loop through for each one. Just use a WP_Query for the Featured category, limit it to 3 posts, and you should be good to go. It's not necessarily optimized but I cobbled it together with your code sample.

This should get you started:

<?php
    $per_page = 3;
    $slideshow_query = new WP_Query( array(
        'cat' => 1,
        'posts_per_page' => $per_page,
    ) );

    if( $slideshow_query->have_posts() ){
        echo '<div class="slideshow-container">';
            while ( $slideshow_query->have_posts() ) {
                $slideshow_query->the_post(); ?>
                <div class="mySlides fade">
                    <div class="numbertext"><?= $slideshow_query->current_post + 1; ?> / <?= $per_page ?></div>
                    <a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
                        <?php the_post_thumbnail( 'large' ); ?>
                    </a>
                    <div class="text"><?php the_title(); ?></div>
                </div>
            <?php } ?>
            <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
            <a class="next" onclick="plusSlides(1)">&#10095;</a>';
        </div>
    <?php } else {
        _e( 'Sorry, no posts matched your criteria.' );
    }
?>

Update: with a recent edit it should be noted that

<?= $slideshow_query->current_post + 1; ?> / <?= $per_page ?>

is functionally equivalent to

<?php echo $slideshow_query->current_post + 1; ?> / <?php echo $per_page ?>

<?= is known as the Short Echo Tag

  • This works perfectly! Thank you so much! – dtortoise Feb 27 at 23:06
  • No sweat, my pleasure! – Xhynk Feb 27 at 23:07
  • May I suggest adding the clause of "how to avoid duplicate" posts? I feel as if this is a huge drawback on UX that many people forget about. – Jonathan Guerin Feb 28 at 3:40
  • @jonathan guerin - I'm afraid I don't quite get what you're suggesting – Xhynk Feb 28 at 4:17
  • @Xhynk I wrote about exactly this "popular" issue: wordpress.meta.stackexchange.com/questions/4483/… – Jonathan Guerin Feb 28 at 4:18

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.