How do I separate the posts in a custom post type WP query into groups of 3, and then separate those groups of 3 into sets of 2?

1 Views

I want to query the WP loop for my ‘portfolio’ custom post type and separate the returned portfolio posts into groups of 3 (i.e. wrap every 3 posts in a div).

Then I want to wrap every 2 groups of 3 in another div.

Read More

For example, if there were a total of 11 portfolio posts, my desired html output for this query would look like this: 

// This is the HTML I'd like to generate on my portfolio posts archive page. This is assuming there are a total of 11 posts in the database:

<div id="page_wrap">

<div id="wrap_6_posts">

    <div id="wrap_3_posts" class="top-row">
        <article class="portfolio-post FIRST"> Post 1 </article>
        <article class="portfolio-post"> Post 2 </article>
        <article class="portfolio-post"> Post 3 </article>
    </div>

    <div id="wrap_3_posts" class="bottom-row">
        <article class="portfolio-post FIRST"> Post 4 </article>
        <article class="portfolio-post"> Post 5 </article>
        <article class="portfolio-post"> Post 6 </article>
    </div>

</div>

<div id="wrap_6_posts">

    <div id="wrap_3_posts" class="top-row">
        <article class="portfolio-post FIRST"> Post 7 </article>
        <article class="portfolio-post"> Post 8 </article>
        <article class="portfolio-post"> Post 9 </article>
    </div>

    <div id="wrap_3_posts" class="bottom-row">
        <article class="portfolio-post FIRST"> Post 10 </article>
        <article class="portfolio-post"> Post 11 </article>
    </div>

</div>

I am new to PHP, so I’m trying to piece together some code from other similar scenarios, but I couldn’t find any thread that addressed my specific issue, so I’m unsure if what I’m doing is right. I’m pretty lost

Here is what I’ve tried: 

<?php
$args = array( 'post_type' => 'portfolio' );
$loop = new WP_Query( $args );
$i = 0;

echo'<div id="page_wrap"><div id="wrap_6_posts"><div id="wrap_3_posts" class="top-row">';

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

    if ($i % 6 == 0 && $i > 0) {
        echo '</div></div><div id="wrap_6_posts"><div id="wrap_3_posts" class="top-row">';
    } else if ($i % 3 == 0 && $i > 0) {
        echo '</div><div id="wrap_3_posts" class="bottom-row">';
    }
    echo '<article class="portfolio-post' . ($i % 3 == 0 ? ' first' : '') . '">';

?>
        <h2 class="headline portfolio-headlines" rel="bookmark">
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </h2>
<?php
endwhile;

    echo '</article>';
    $i++;

echo '</div></div></div>';
?>

The output looks like this: 

<div id="page_wrap">
<div id="wrap_6_posts">
    <div id="wrap_3_posts" class="top-row">
        <article class="portfolio-post first">      
            post 1

        <article class="portfolio-post first">      
            post 2

        <article class="portfolio-post first">      
            post 3

        <article class="portfolio-post first">      
            post 4

        <article class="portfolio-post first">      
            post 5

        <article class="portfolio-post first">      
            post 6

        <article class="portfolio-post first">      
            post 7

        <article class="portfolio-post first">      
            post 8

        <article class="portfolio-post first">      
            post 9

        <article class="portfolio-post first">      
            post 10

        <article class="portfolio-post first">      
            post 11
        </article>

    </div>
</div>

Can anyone make sense of this? The logic is a challenge for me, but also just getting the syntax correct and making sure that the code is talking to WP effectively adds to the challenge.

Thank you in advance for any help!

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. With the help of @jothikannan and his instruction to include my $i++ increment counter inside the while loop, I also discovered that I needed to include the closing echo '</article>'; inside the while loop.

    So here is the final code:

    <?php
$args = array( 'post_type' => 'portfolio' );
$loop = new WP_Query( $args );
$i = 0;

echo'<div id="wrap_6_posts">' . "n" . '<div id="wrap_3_posts" class="top-row">' . "n";

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

    if ($i % 6 == 0 && $i > 0) {
        echo '</div>' . "n" . '</div>' . "n" . '<div id="wrap_6_posts">'  . "n" . '<div id="wrap_3_posts" class="top-row">' . "n";
    } else if ($i % 3 == 0 && $i > 0) {
        echo '</div>' . "n" . '<div id="wrap_3_posts" class="bottom-row">' . "n";
    }

echo '<article class="portfolio-post' . ($i % 3 == 0 ? ' first' : '') . '">' . "n";

?>
<h2 class="headline portfolio-headlines" rel="bookmark">
    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h2>
<?php

echo '</article>' . "n";
$i++;

endwhile;

echo '</div>' . "n" . '</div>';
?>

    And this successfully outputs the following html for my portfolio archive page (there are only 8 portfolio posts in my database for this example):

    <div id="wrap_6_posts">
<div id="wrap_3_posts" class="top-row">
<article class="portfolio-post first">
<h2 class="headline portfolio-headlines" rel="bookmark">

    <a href="http://example.com/portfolio/post-1/">Post 1</a>

</h2>

</article>
<article class="portfolio-post">
<h2 class="headline portfolio-headlines" rel="bookmark">

    <a href="http://example.com/portfolio/post-2/">Post 2</a>

</h2>

</article>
<article class="portfolio-post">
<h2 class="headline portfolio-headlines" rel="bookmark">

    <a href="http://example.com/portfolio/post-3/">Post 3</a>

</h2>

</article>
</div>
<div id="wrap_3_posts" class="bottom-row">
<article class="portfolio-post first">
<h2 class="headline portfolio-headlines" rel="bookmark">

    <a href="http://example.com/portfolio/post-4/">Post 4</a>

</h2>

</article>
<article class="portfolio-post">
<h2 class="headline portfolio-headlines" rel="bookmark">

    <a href="http://example.com/portfolio/post-5/">Post 5</a>

</h2>

</article>
<article class="portfolio-post">
<h2 class="headline portfolio-headlines" rel="bookmark">

    <a href="http://example.com/portfolio/post-6/">Post 6</a>

</h2>

</article>
</div>
</div>
<div id="wrap_6_posts">
<div id="wrap_3_posts" class="top-row">
<article class="portfolio-post first">
<h2 class="headline portfolio-headlines" rel="bookmark">

    <a href="http://example.com/portfolio/post-7/">Post 7</a>

</h2>

</article>
<article class="portfolio-post">
<h2 class="headline portfolio-headlines" rel="bookmark">

    <a href="http://example.com/portfolio/post-8/">Post 8</a>

</h2>

</article>
</div>
</div>

    Success! Thank you!

  2. Try to make increment on inside the while loop , 

        <?php
$args = array( 'post_type' => 'portfolio' );
$loop = new WP_Query( $args );
$i = 0;

echo'<div id="wrap_6_posts">' . "n" . '<div id="wrap_3_posts" class="top-row">' . "n";

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

    if ($i % 6 == 0 && $i > 0) {
        echo '</div>' . "n" . '</div>' . "n" . '<div id="wrap_6_posts">'  . "n" . '<div id="wrap_3_posts" class="top-row">' . "n";
    } else if ($i % 3 == 0 && $i > 0) {
        echo '</div>' . "n" . '<div id="wrap_3_posts" class="bottom-row">' . "n";
    }

echo '<article class="portfolio-post' . ($i % 3 == 0 ? ' first' : '') . '">' . "n";

?>
<h2 class="headline portfolio-headlines" rel="bookmark">
    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h2>
<?php

echo '</article>' . "n";
$i++;

endwhile;

echo '</div>' . "n" . '</div>';
?>