Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I´m trying to make a slider which takes thumbnails from a certain custom post type and displays for of them for each "slide". I get the slider and thumbnails to work like they should, but I´m unsure of how I should modify the loop to get it to display 4 posts in a container, then repeat with the next 4 posts and so on.

My loop looks like this:

<div id="slides">
    <div class="slides_container">

        <?php $loop = new WP_Query(array('post_type' => 'fastighet', 'posts_per_page' => -1, 'orderby'=> 'ASC')); ?>
        <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>

            <div class="slide">
                <?php $url = get_post_meta($post->ID, "url", true);
                if($url!='') {
                    echo '<a href="'.$url.'">';
                    echo the_post_thumbnail('admin-list-thumb');
                    echo '</a>';
                } else {
                    echo the_post_thumbnail('admin-list-thumb');
                } ?>
                <div class="caption">
                    <h5><?php the_title(); ?></h5>
                </div>
            </div>

        <?php endwhile; ?>
        <?php wp_reset_query(); ?>

    </div> <!-- end .slides_container -->

    <a href="#" class="prev">prev</a>
    <a href="#" class="next">next</a>

</div> <!-- end .slides -->

Every div with the class of slide becomes a slide as you can see. But how can I make it put 4 posts into each such slide, then 4 post more into another slide etc.

Any help or tips would be really appreciated!

share|improve this question
1  
Since you already know how to query your posts, and how to return the featured image from those posts, what's left is really a PHP question, rather than a WordPress question. –  Chip Bennett Mar 7 '12 at 12:38

2 Answers 2

up vote 2 down vote accepted

Tried very simple math. <div class="slide"> will print after every 4 post. So, if statement with old school logic $i%4 == 0

<div class="slides_container">

                        <?php 
                            $args = array(
                                                        'post_type' => 'fastighet',
                                                        'numberposts' => -1,
                                                        'orderby' => 'ASC'
                                                    );
                            $posts = get_posts($args);
                            ?>
                        <?php $i = 0; foreach($posts as $post): ?>
                            <?php if($i%4 == 0): ?>
                                <div class="slide">
                            <?php endif; 
                                        $url = get_post_meta($post->ID, "url", true);
                                        if($url) {
                                                echo '<a href="'.$url.'">';
                                                echo the_post_thumbnail('admin-list-thumb');
                                                echo '</a>';
                                        } else {
                                                echo the_post_thumbnail('admin-list-thumb');
                                        } ?>
                                        <div class="caption">
                                                <h5><?php the_title(); ?></h5>
                                        </div>
                              <?php if($i%4 == 3): ?></div> <!--end .slide--><?php endif; ?> 

                        <?php $i++; endforeach; ?>

                </div> <!-- end .slides_container -->

Let me know how it goes. Thanks!

share|improve this answer
    
Seems I still only get one picture per slide for some reason. Also the thumbnails doesn´t link to anything, although they should link to each post. –  Johan Dahl Mar 7 '12 at 9:07
    
@JohanDahl: there was a error on my code. Fixed it. Try now. –  Sisir Mar 7 '12 at 9:15
    
Yeah I noticed the missing <?php, and added it. Still nothing changed though. Still only get one slide per image :/ –  Johan Dahl Mar 7 '12 at 9:20
    
@JohanDahl Like what now? –  kaiser Mar 7 '12 at 9:22
    
I updated my code so some other stuff would work. Still only getting one post thumbnail per slide though. pastebin.com/WbERsyUH –  Johan Dahl Mar 7 '12 at 9:33

Almost correct. The only problem was that you actually don't want to print both the start and end on the same index. The following code works for me in a similar situation. The only real change is that $i starts at 1 and it print's the slides opening and closing tags on different counts.

Also took the liberty of cleaning up the code a bit.

<div id="slides">
    <div class="slides_container">

        <?php 
        $loop = new WP_Query( array( 
            'post_type' => 'fastighet', 
            'posts_per_page' => -1 
        ) ); 
        $i = 1; 
        while ( $loop->have_posts() ) : 
            $loop->the_post(); 
            if( $i % 4 == 1 ) : 
                ?>
                <div class="slide">
                <?php 
            endif; 
            ?>
            <div class="fastighet-slider-entry">
                <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(); ?></a>
                <div class="caption">
                    <h5><?php the_title(); ?></h5>
                </div>
            </div> <!-- end .fastighet-slider-entry -->
            <?php 
            if( $i % 4 == 0 ) : 
                ?>
                </div>
                <?php 
            endif; 
            ++$i; 
        endwhile; 
        wp_reset_query(); 
        ?>

    </div> <!-- end .slides_container -->

    <a href="#" class="prev">prev</a>
    <a href="#" class="next">next</a>

</div> <!-- end .slides -->
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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