Creating a loop within a loop in Wordpress to display 12 posts in groups of two contained in separate divs

Question

I was hoping one of you Wordpress gurus can help me out here.

I'm trying to create a loop within a loop that presents 12 posts, in 6 rows. In each row you have 2 divs. Each div is meant to display a post title. And the loop runs through all of the 12 posts and groups them correctly - 6 divs, with 2 posts. Each post has it's own unique title.

I've managed to get the loop to breakdown the 12 posts into 6 divs, each with two inner divs in there. But I can't get the inner divs to loop through all the posts. Instead they are just looping through the first two.

So what I end up with is 6 rows, each with two divs. But only the first two posts keep recurring throughout all the rows. What am I doing wrong here?

<!--TESTER -->
<!--TESTER -->
<!--TESTER -->
        <div class="section section-testimonials">

            <?php
                $args=array(
                'post_type' => 'testimonial'
                );
                $query = null;
                $query = new WP_Query($args);
                if( $query -> have_posts() ) {
                    echo '';
                $i = 0;

                while ($query -> have_posts()) : $query->the_post();

                    if($i % 2 == 0) { ?>

                        <div class="row">

                            <?php $loop = new WP_Query( array( 'post_type' => 'testimonial', 'posts_per_page' => 2 ) ); ?>

                            <?php while ( $loop -> have_posts() ) : $loop -> the_post(); ?>

                            <!-- Two posts appear here -->
                            <div class="col-md-6">
                                <h1><?php the_title(); ?></h1>
                            </div>

                            <?php endwhile; ?>

                        </div>

                    <?php } ?>
                    <?php

                    $i++;
                endwhile;
            }

            wp_reset_query();
            ?>

        </div>
<!--TESTER -->
<!--TESTER -->
<!--TESTER -->

Any help would be incredibly appreciated!

Cheers, Sanny

You can use a counter...but the bootstrap grid should appear/wrap fine as-is. — rnevius, Jan 26 '17 at 01:27

score 0 · Answer 1 · answered Jan 26 '17 at 02:46

Here, I break the problem into pieces, so you can see the loops working on their own.

<?php 

$slides = [0,1,2,3,4,5];

foreach($slides as $slide):
?>
    <!-- I need to get 6 of these divs which contain 2 cards inside them -->
    <div class="item active">
        <p>Example Carousel Slide <?php echo $slide;?></p>
    </div>
<?php endforeach?>

Then, instead of just echoing a constant <p> tag, you instead put a loop there.

<?php
$posts = ["post1", "post2"];
foreach($posts as $post):?>
    <div class="col-md-6">
        <?php echo $post;?>
    </div>
<?php endforeach?>

I will jump ahead a few steps, but you end up with something like this.

<?php

$posts = [
    0=>"post0",
    1=>"post1",
    2=>"post2",
    3=>"post3",
    4=>"post4",
    5=>"post5",
    6=>"post6",
    7=>"post7",
    8=>"post8",
    9=>"post9",
    10=>"post10",
    11=>"post11"];

for($slideNumber=0; $slideNumber < 6; $slideNumber++):
?>
    <!-- I need to get 6 of these divs which contain 2 cards inside them -->
    <div class="item active">
        <?php
        echo("<p>This is slide number " . $slideNumber . "</p>");
        for($i=0; $i<2; $i++):?>
            <div class="col-md-6">
                <?php 
                $actualPostNumber= ($slideNumber * 2) + $i ;
                echo("<p>" . $posts[$actualPostNumber]  . "</p>");
                ?>
            </div>
        <?php endfor; ?>
    </div>
<?php endfor; ?>

Read that code, and try to come up with an expectation for what it will produce. In the end, you should end up with 6 slides, each containing two posts.

The code I posted is a skeleton relative to your eventual solution. However, hopefully this "counters" approach will assist you with assigning the correct number of posts to each carousel slide.

score 0 · Answer 2 · answered Jan 26 '17 at 04:15

Thanks guys for all the help. I've managed to solve this!!! Here's the solution:

If anyone has any thoughts on making this a better solution lemme know! Cheers

<?php
    $args=array(
    'post_type' => 'testimonial',
    );

    $query = new WP_Query($args);

    if( $query -> have_posts() ) {
        echo '';
    $i = 0;
    $ids = array();

    while ($query -> have_posts()) : $query->the_post();

        if($i % 2 == 0) { ?>

            <div class="item <?php if($i == 0) :?>active<?php endif; ?>">
                <div class="row">

                    <?php $loop = new WP_Query( array( 'post_type' => 'testimonial', 'posts_per_page' => 2, 'orderby'   => 'rand', 'post__not_in' => $ids ) ); ?>

                    <?php while ( $loop -> have_posts() ) : $loop -> the_post(); ?>

                    <!-- A single testimonial -->
                    <div class="col-md-6">
                        <div class="card card-plain">
                            <div class="content">
                                <h4 class="title"><?php the_content(); ?></h4>
                                    <div class="footer">
                                        <div class="author">
                                            <span><?php the_title(); ?></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <?php $ids[] = get_the_ID(); ?>

                    <?php endwhile; ?>

                </div>
            </div>
    <?php } ?>
        <?php
        $i++;
        endwhile;
    }

    wp_reset_query();
?>

Creating a loop within a loop in Wordpress to display 12 posts in groups of two contained in separate divs

2 Answers2