Skip to content
Advertisement

WordPress – Split custom posts into rows and columns

I have a layout where we want to place the custom posts types on alternating rows and 2 & 3 columns.

so basically:

<div class="wrapper">
  <div class="row">
    <div>post 1</div>
    <div>post 2</div>
  </div>
  <div class="row">
    <div>post 3</div>
    <div>post 4</div>
    <div>post 5</div>
  </div>
  <!-- then 2 new row with 2 columns followed by 3 columns and so on  -->
</div>

Any suggestions?

Advertisement

Answer

 $args = array(
    'posts_per_page'   => -1,
    'post_type'        => 'post',
);
$the_query = new WP_Query($args);
if (!empty($the_query->posts)) {
    $count_post_row = 0;
    $rowcount = 1;
    echo '<div class="wrapper">'; // start wrapper
    foreach ($the_query->posts as $post) {
        $count_post_row++;
        if ($count_post_row == 1) {
            echo '<div class="row">'; // start row 
        }
        echo '<div>' . $post->post_title . '</div>';

        if ($rowcount == 1 && $count_post_row == 2) {
            $count_post_row = 0;
            $rowcount = 2;
            echo '</div>'; // end row if its first section and 2 post add
        }
        if ($rowcount == 2 && $count_post_row == 3) {
            $rowcount = 1;
            $count_post_row = 0;
            echo '</div>'; // end row if its second section and 3 post add 
        }
    }
    echo '</div>'; // start wrapper
}

This is the code you got your results and its continue as your requirements you can check the screenshot below.. If need any more help drop the comment or message will help..

enter image description here

User contributions licensed under: CC BY-SA
8 People found this is helpful
Advertisement