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?

Question

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.

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!

Try to make increment on inside the while loop $i++; – Jothi Kannan Aug 08 '13 at 07:57 — Jothi Kannan, Aug 08 '13 at 07:57

Jothi Kannan · Answer 1 · 2013-08-11T03:25:37.600

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>';
?>

edited Aug 11 '13 at 03:25

answered Aug 08 '13 at 07:58

Jothi Kannan

3,320
6
40
77

What do the percentages do? equal to? – Ben Racicot Aug 08 '13 at 13:10
What you mean?i can't get your last comment – Jothi Kannan Aug 08 '13 at 13:13
1

@BenRacicot The percentage symbol is the modulus operator. See [link](http://stackoverflow.com/questions/2664301/how-does-modulus-divison-work) – user2655393 Aug 08 '13 at 17:35
@jothikannan Thank you for catching that error. With your suggestion and one more small tweak (including the closing /article container inside the while loop) I have finally gotten the correct output! Thanks jothikannan! I will post the full answer below. – user2655393 Aug 08 '13 at 17:38
@jothikannan It was almost correct. It lead me to the right answer. But I don't want to confuse future readers of this thread, so I posted the full right answer below. And i mentioned that your answer was instrumental. – user2655393 Aug 08 '13 at 17:56
Hello, that is not matter, if my answer is correct, you must accept it, then only this question is considered as answered , so do it – Jothi Kannan Aug 09 '13 at 04:17
@jothikannan Woa buddy! Relax... You're answer was NOT correct. It was CLOSE, but not fully correct. Why don't you edit your answer so that it is correct, and then I'll mark it as such. Otherwise it would be misleading to other readers. They might try to use your code and it won't work properly. Take a look at my post below, and make the appropriate edits, and then I'll mark your answer as correct. Everyone's happy! – user2655393 Aug 11 '13 at 01:18

score 2 · Accepted Answer · answered Aug 08 '13 at 17:53

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!

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?

2 Answers2