1

I'm attempting to create a single WP loop, using a custom query, to display a custom-post-type - using Bootstrap 4 markup. The complicating part for me is, I'd like the number of posts for each row to alternate in the following way:

  • Row 1 - One Post - Full Screen width
  • Row 2 - Four Posts - col-md-6
  • Row 3 - Six Posts - col-md-4

At the moment I'm running three individual loops which is messing-up the pagination. i.e. When pagination is clicked the page content remains the same - however the url indicates that the user is on the second page. Grateful for any help.

                      <!-- Loop 1 -->
                  <?php
                    $paged = ( get_query_var( 'paged' ) ) ? absint( get_query_var( 'paged' ) ) : 1;
                    $args=array(
                       'post_type' => 'workshop',
                       'post_status' => 'publish',
                       'posts_per_page' => 1,
                      );

                    $my_query = null;
                    $my_query = new WP_Query($args);

                    if( $my_query->have_posts() ) {

                      $i = 0;
                      while ($my_query->have_posts()) : $my_query->the_post();
                    // modified to work with 3 columns
                    // output an open <div>
                    if($i % 1 == 0) { ?>

                        <div class="row">

                        <?php
                        }
                        ?>

                          <!-- ROW 1 -  FULL SCREEN WIDTH MARKUP -->

                      </div><!--/.row-->

                        <?php $i++;
                        if($i != 0 && $i % 1 == 0) { ?>
                   </div> <!-- End Container -->
                   <div class="clearfix"></div>

                    <?php
                     } ?>

                    <?php
                      endwhile;
                      }
                      wp_reset_postdata();
                      ?>
                    <!-- Loop Two -->
                    <?php
                                                $paged = ( get_query_var( 'paged' ) ) ? absint( get_query_var( 'paged' ) ) : 1;

                                                $args=array(

                                                     'post_type' => 'workshop',
                                                     'post_status' => 'publish',
                                                     'posts_per_page' => 4,
                                                     'offset' => 1,
                                                     'paged'  => $paged

                                                    );

                                                $my_query = null;
                                                $do_not_duplicate[] = $post->ID;
                                                $my_query = new WP_Query($args);

                                                if( $my_query->have_posts() ) {

                                                    $i = 0;
                                                    while ($my_query->have_posts()) : $my_query->the_post();
                                                // modified to work with 3 columns
                                                // output an open <div>
                                                if($i % 2 == 0) { ?>

                                                <div class="row no-gutters">
                                                <?php
                                                }
                                                ?>

                      <!-- ROW 2 - [FOUR POSTS] MARKUP HERE -->

                      <?php $i++;
                      if($i != 0 && $i % 2 == 0) { ?>
                        </div><!--/.row-->

                        <?php
                         } ?>



                        <?php
                          endwhile;


                          }
                          wp_reset_query();
                          ?>

                      $args=array(

                         'post_type' => 'workshop',
                         'post_status' => 'publish',
                         'posts_per_page' => 6,
                         'offset' => 5,
                         'paged'  => $paged

                        );

                      $my_query = null;
                      $do_not_duplicate[] = $post->ID;
                      $my_query = new WP_Query($args);

                      if( $my_query->have_posts() ) {

                        $i = 0;
                        while ($my_query->have_posts()) : $my_query->the_post();
                      // modified to work with 3 columns
                      // output an open <div>
                      if($i % 3 == 0) { ?>

                      <div class="row no-gutters">
                      <?php
                      }
                      ?>

                      <!-- ROW 3 - [Six Posts] Markup -->




                      <?php $i++;
                      if($i != 0 && $i % 3 == 0) { ?>
                        </div><!--/.row-->


                      <?php
                       } ?>



                      <?php
                        endwhile;


                        }
                        wp_reset_query();
                        ?>

  • Could you show the loops you're using currently? – Krzysiek Dróżdż Feb 6 at 18:15
  • what if you go over 11 posts? does this pattern start over or are all the rest in col-md-4? – rudtek Feb 6 at 18:17
  • @rudtek I'd like to repeat the pattern. – Nate K Feb 6 at 20:24
0

The easy-but-a-bit-hacky way to get there would be to initialize a counter variable before your loop and then use that to tell what post you're on. something like so:

    $paged = (get_query_var('paged')) ? absint(get_query_var('paged')) : 1;
$args = array(
    'post_type'      => 'workshop',
    'post_status'    => 'publish',
    'posts_per_page' => 11,
    'paged'          => $paged,
);
$customQuery = new WP_Query($args);
$counter = 1;
if ($customQuery->have_posts()) :
    while ($customQuery->have_posts()) : $customQuery->the_post();
        if ($counter === 1) { ?>
            <div class="row">
                <!-- ROW 1 -  FULL SCREEN WIDTH MARKUP -->

            </div><!--/.row-->
            <?php
        } elseif ($counter <= 5) {
            if ($counter === 2) { ?>
                <div class="row no-gutters">
            <?php }
            ?>
                <!-- ROW 2 - [FOUR POSTS] MARKUP HERE -->
            <?php if ($counter === 5) { ?>
                </div><!--/.row-->
            <?php }
        } else {
            if ($counter === 6) { ?>
                <div class="row no-gutters">
            <?php } ?>
                    <!-- ROW 3 - [Six Posts] Markup -->
            <?php if ($counter === 11) { ?>
                </div><!--/.row-->
            <?php } 
        };
        $counter++;
    endwhile;
endif;
  • 1
    not hacky...programmy – rudtek Feb 6 at 21:25
  • @mrben522 thank you for this answer. I'm very new to PHP and WP loops how do I call me custom post type and stitch the existing bootstrap markup [shown above], into your solution? – Nate K Feb 15 at 10:06
  • Updated answer to have your markup in there. – mrben522 Feb 15 at 17:46
  • @mrben522 Thank you for this. I've added my markup to your solution however I keep getting a page that appears broken. The second row of post shows three vertically aligned posts that are col-md-4 and one post that is col-md-6 all. I'm certain this is caused by my markup rather than your solution. What should I look for to debug? codeshare.io/GbqjdO – Nate K Feb 20 at 10:45
  • elseif ($counter >= 5) should be elseif ($counter <= 5) – mrben522 Feb 20 at 13:41
0

There is no need to introduce a counter, you can use $wp_query->current_post.

<?php

$paged = (get_query_var('paged')) ? absint(get_query_var('paged')) : 1;

$args = array(
    'post_type'      => 'workshop',
    'post_status'    => 'publish',
    'posts_per_page' => 11,
    'paged'          => $paged,
);

$customQuery = new WP_Query($args);

// Row 1 - One Post - Full Screen width
while ($customQuery->have_posts() && $customQuery->current_post < 1 ) : $customQuery->the_post(); ?>

            <div class="row">  
               <!-- ROW 1 -  FULL SCREEN WIDTH MARKUP -->
            </div><!--/.row-->

<?php endwhile;

//Row 2 - Four Posts - col-md-6
while ($customQuery->have_posts() && $customQuery->current_post < 5) : $customQuery->the_post(); ?>

            <div class="row no-gutters">
               <!-- ROW 2 - [FOUR POSTS] MARKUP HERE -->
            </div><!--/.row-->

<?php endwhile;

//Row 3 - Six Posts - col-md-4
while ($customQuery->have_posts()) : $customQuery->the_post(); ?>

            <div class="row no-gutters">
                <!-- ROW 3 - [Six Posts] Markup -->
            </div><!--/.row-->

<?php endwhile; ?>
  • Thank you for your answer Qaisar, I've attempted to use your solution. The first row outputs perfectly fine however 2nd row of posts only display one post which is full width and the rest of the loop is not aligned. Would you mind taking a look at my markup to see what I've missed or not done correctly? codeshare.io/GbqjdO – Nate K Feb 20 at 16:31
  • The code at above referred link relates to solution of @mrben522. Please see his comment on his answer. Thanks. – Qaisar Feroz Feb 20 at 17:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.