I'm looking at displaying articles in twos. ie:

<section class="side" data-role="side" id="section-section1">
    Two articles
</section>

<section class="side" data-role="side" id="section-section2">
    Next Two articles
</section>

<section class="side" data-role="side" id="section-section3">
    Next Two articles
</section>

I'm currently using an offset but eventually as more articles are added I need it to automatically keep pairing the articles.

Does anyone have a clever solution or am I stuck with an offset?

Note: I have no option apart from displaying in pairs due to the design.

I'm looking at displaying articles in twos. ie:

<section class="side" data-role="side" id="section-section1">
    Two articles
</section>

<section class="side" data-role="side" id="section-section2">
    Next Two articles
</section>

<section class="side" data-role="side" id="section-section3">
    Next Two articles
</section>

I'm currently using an offset but eventually as more articles are added I need it to automatically keep pairing the articles.

Does anyone have a clever solution or am I stuck with an offset?

Note: I have no option apart from displaying in pairs due to the design.

• loop

• Do you need help with the article loop code or the design code/ CSS? – Arsalan Mithani Commented Oct 28, 2019 at 14:22
• The loop itself, design is in place :D – Paul Commented Oct 28, 2019 at 14:25
• 1 It isn't, You've shared your idea/goal you want to achieve & not the code. Separating sections after 2 posts is only good when you're calling different categories in each section & not all posts, I recommend use <ul> list. Create one section & apply loop to display posts in <li> & style each `<li>' 50% of the container width to display as pair. – Arsalan Mithani Commented Oct 28, 2019 at 14:39

1 Answer 1

I would a bit more detail (or your starting code ) to see where you're putting this or how you want to use it but from what I see you need to add a counter to your iteration and then use a modulo operator:

a sample query would look like this though:

$winnners_query = new WP_Query(array(
  'post_type' => 'post',
  'posts_per_page' => '10',
));

if ($winnners_query->have_posts()) {
  $i=1;
  $section=1; //section counter
  $count = $winnners_query->found_posts;  //total post count
  echo '<section class="side" data-role="side" id="section-section'.$section.'">'; //adds first section (you need to add css to style)
  while ($winnners_query->have_posts()) {
    $winnners_query->the_post();
    echo '<div class="content">'.get_the_title().'</div>'; //adds content you need to add css styles
    if ( $count == $i) {
        //we're on the last post of the query.  Close section
        echo '</section>';
    } else {
      if ($i % 2) { //if iteration is even increase section count, close section and open a new one
        $section++;
        echo '</section><section class="side" data-role="side" id="section-section'.$section.'">';
      }
      $i++;
    } 
  }
  wp_reset_postdata();
}