Repeat cycle after every third message? (Wordpress)

Question

I have a problem in my template (wordpress). I want to create a portfolio page containing 3 columns and which can display messages on my portfolio page (without going to a new page). And I need to repeat these three posts after every third post. I will assign a “hidden” class to my duplicate messages, and when I click on a column, the class should be set as a “block”. I have a code:

<?php get_header(); ?> <section> <div class="container container-bazar container-gallery"><?php $array = array(); $count = 0; $i = 0; $args = array( 'posts_per_page' => -1, 'post_type' => 'gallery', ); $gallery = new WP_Query( $args ); if($gallery->have_posts()) : while($gallery->have_posts()) : $gallery->the_post(); ?> <div class="col-1 boxes<?php if( $count%3 == 0 ) { echo '-1'; }; $count++; ?>"> <div class="post" id="post-<?php the_ID(); ?>"> <figure class="indent-bot"> <a href="<?php the_permalink(); ?>" rel="nofollow"> <?php the_post_thumbnail(array(380,220,true)); ?> </a> </figure> <div class="col-1-content"> <strong class="title-3"> <a href="<?php the_permalink(); ?>" rel="nofollow"> <?php the_title(); ?> </a> </strong> <div class="entry"> <a href="<?php the_permalink(); ?>" rel="nofollow"> <?php the_excerpt(); ?> </a> </div><!-- .entry --> </div><!-- .col-1-content--> </div><!-- .post --> </div> <!-- .boxes --> <?php endwhile; ?> <?php while($gallery->have_posts()) : $gallery->the_post();?> <?php $imgaddr1 = get_post_meta($post->ID, 'imgaddr1', true); $imgaddr2 = get_post_meta($post->ID, 'imgaddr2', true); $imgssilka1 = get_post_meta($post->ID, 'imgssilka1', true); $imgssilka2 = get_post_meta($post->ID, 'imgssilka2', true); $namecolor1 = get_post_meta($post->ID, 'namecolor1', true); $namecolor2 = get_post_meta($post->ID, 'namecolor2', true); $numbercolor1 = get_post_meta($post->ID, 'numbercolor1', true); $numbercolor2 = get_post_meta($post->ID, 'numbercolor2', true); ?> </div> <div class="full clearfix"> <div class="inner"> <figure class="indent-bot1"> <a href="<?php the_permalink(); ?>" rel="nofollow"> <?php the_post_thumbnail(array(960,690)); ?> </a> </figure> <div class="row"> <div class="col-md-5"> <div class="inf-1"> <h4></h4> </div> <div class="inf-2"> <h5><?php the_title(); ?></h5> <div class="desc"> <?php the_excerpt(); ?> </div> </div> <div class="clearfix"></div> </div> <div class="col-md-7 border-left"> <div class="inf-1"> <h4> </h4> </div> <div class="inf-2"> <ul> <li class="first-child"> <a href="<?php echo $imgssilka1; ?>" class="img-block"> <img src="<?php echo $imgaddr1; ?>"> </a> <div class="txt"> <strong><?php echo $namecolor1; ?></strong> <span><?php echo $numbercolor1; ?></span> </div> </li> <li class="last-child"> <a href="<?php echo $imgssilka2; ?>" class="img-block"> <img src="<?php echo $imgaddr2; ?>"> </a> <div class="txt"> <strong><?php echo $namecolor2; ?></strong> <span><?php echo $numbercolor2; ?></span> </div> </li> </ul> </div> <div class="clearfix"></div> </div> </div> </div><!-- .inner --> </div> <div class="container container-bazar container-gallery"> <?php endwhile; else: endif; ?> </div><!-- .container --> </section> <?php get_footer(); ?> 

but this code outputs messages sequentially.

Answer 1

This is a rather unusual setup that I was thinking about. There is a way without restarting the loop

HERE AS

• You need to run the loop only once. Instead of the default loop, we pull our message array from our request and run our messages through the foreach . Here we start things

• We need to split our content so that we can get two blocks with post-data, and this needs to be saved in an array, which we will use later. To do this, create two concatenated data rows (one row with the first data block, the second with the second data block), which will be stored in two separate variables.

• Once this is done, we need to add our divs to form message blocks containing three messages, each of which has a unique class. This applies to both sets of strings.

• Now we need to compute the new array keys so that we can build a new data array after sorting, so we have a sequence of post-data blocks with three messages from the first row, and then a post data block with the same three messages from row two, etc. d.

• Finally, since our message array is still mixed and not working, we sort the array so that the keys are numeric, then we can use the last foreach to output our post data

HERE CODE

Just a note or two before sending the code

• You need to change classes, etc. to suit your needs.

• The code is not fully tested, but div blocks and sorting work as expected

• I commented on the code to make it easier to follow

Finally code

 $args = array( 'posts_per_page' => -1, 'post_type' => 'gallery', ); $gallery = new WP_Query( $args ); // Check if we have posts before we continue if( $gallery->have_posts() ) { // Use the array of posts and a foreach loop to build out super array foreach ( $gallery->posts as $key=>$post ) { // Setup postdata so we can make use of template tags setup_postdata( $post ); // Setup/define our first variable which will hold our first set of post data $output = ''; // Open a new div on the first post and every 3rd one there after to hold three posts if ( $key%3 == 0 ) { // We will call this class "first-x" where x represents the block count $output .= '<div class="first-' . floor( $key / 3 ) . '">'; } // Concatenate your first loop into a string to our first variable $output $output .= '<div class="post" id="post-' . $post->ID . '"> <figure class="indent-bot"> <a href="' . get_the_permalink() . '" rel="nofollow"> ' . get_the_post_thumbnail( $post->ID, array( 380,220,true ) ) . ' </a> </figure> <div class="col-1-content"> <strong class="title-3"> <a href="' . get_the_permalink() . '" rel="nofollow"> ' . get_the_title() . ' </a> </strong> <div class="entry"> <a href="' . get_the_permalink() . '" rel="nofollow"> ' . get_the_excerpt() . ' </a> </div><!-- .entry --> </div><!-- .col-1-content--> </div><!-- .post --> </div> <!-- .boxes -->'; // Add our closing div after every third post or the last post if there is less than three if ( $key%3 == 2 || !array_key_exists( ( $key + 1 ), $gallery->posts ) ) { $output .= '</div>'; } // Create our new array of post data split in two and use with new array keys $new_posts_array[floor( $key / 3 ) * 3 + $key] = $output; // Setup/define our second variable which will hold the second set of post data from our posts // This is the set that you would like to hide $output_1 = ''; // Open a new div on the first post and every 3rd one there after to hold three posts if ( ( $key%3 ) == 0 ) { // This block of posts will use class "second-x" where x represents the block count $output_1 .= '<div class="second-' . floor( $key / 3 ) . '">'; } $imgaddr1 = get_post_meta( $post->ID, 'imgaddr1', true ); $imgaddr2 = get_post_meta( $post->ID, 'imgaddr2', true ); $imgssilka1 = get_post_meta( $post->ID, 'imgssilka1', true ); $imgssilka2 = get_post_meta( $post->ID, 'imgssilka2', true ); $namecolor1 = get_post_meta( $post->ID, 'namecolor1', true ); $namecolor2 = get_post_meta( $post->ID, 'namecolor2', true ); $numbercolor1 = get_post_meta( $post->ID, 'numbercolor1', true ); $numbercolor2 = get_post_meta( $post->ID, 'numbercolor2', true ); // Concatenate your second set of post data into a string to our second variable $output_1 $output_1 .= '<div class="full clearfix"> <div class="inner"> <figure class="indent-bot1"> <a href="' . get_the_permalink() . '" rel="nofollow"> ' . get_the_post_thumbnail( $post->ID, array( 960, 690 ) ) . ' </a> </figure> <div class="row"> <div class="col-md-5"> <div class="inf-1"> <h4></h4> </div> <div class="inf-2"> <h5>' . get_the_title() . '</h5> <div class="desc"> ' . get_the_excerpt() . ' </div> </div> <div class="clearfix"></div> </div> <div class="col-md-7 border-left"> <div class="inf-1"> <h4> </h4> </div> <div class="inf-2"> <ul> <li class="first-child"> <a href="' . $imgssilka1 . '" class="img-block"> <img src="' . $imgaddr1 . '"> </a> <div class="txt"> <strong>' . $namecolor1 . '</strong> <span>' . $numbercolor1 . '</span> </div> </li> <li class="last-child"> <a href="' . $imgssilka2 . '" class="img-block"> <img src="' . $imgaddr2 . '"> </a> <div class="txt"> <strong>' . $namecolor2 . '</strong> <span>' . $numbercolor2 . '</span> </div> </li> </ul> </div> <div class="clearfix"></div> </div> </div> </div><!-- .inner --> </div>'; // Add our closing div after every third post or the last post if there is less than three if ( $key%3 == 2 || !array_key_exists( ( $key + 1 ), $gallery->posts ) ) { $output_1 .= '</div>'; } // Create our new array of post data split in two and use with new array keys $new_posts_array[( floor( $key / 3 ) + 1 ) * 3 + $key] = $output_1; } wp_reset_postdata(); // Sort our new array so that the keys are numerical again ksort( $new_posts_array ); // Run a foreach loop to output our posts as we need. No need to modify anything here foreach ( $new_posts_array as $v ) echo $v; } 

Answer 2

 $i = 1; //added before to ensure it gets opened echo '<div>'; if ( $wp_query->have_posts() ) : while ( $wp_query->have_posts() ) : $wp_query->the_post(); // post stuff... // if multiple of 3 close div and open a new div if($i % 3 == 0) {echo '</div><div>';} $i++; endwhile; endif; //make sure open div is closed echo '</div>'; 

Answer 3

As we all know, WordPress is an open source tool, and all plugins are available to manage this formatting.

I recommend using plugins to manage your requirements. I used the column plugin for formatted output.

Answer 4

I got the total number of entries and made a loop. Inside the cycle there are two cycles. The first loop displays the table. The second loop displays the list.

 <section> <div class="container container-gallery"> <?php $offset = 0; $offset1 = 0; $i =0; $count = 0; $reset =0; $reset1 = 0; $args = array( 'posts_per_page' => -1, 'post_type' => 'gallery', ); $gallery = new WP_Query( $args ); $numberposts = $gallery->post_count; if ($numberposts){ $id1=0; $id2=0; while($count < $numberposts){ // print_r($arr1); $count++; //echo "<h2>".$count."</h2>"; $arr1 = array( 'posts_per_page' => 400, 'post_type' => 'gallery', 'offset'=>$offset ); $arr2 = array( 'posts_per_page' => 400, 'post_type' => 'gallery', 'offset'=>$offset1 ); $loop1 = new WP_Query($arr1); $loop2 = new WP_Query($arr1); while($loop1->have_posts()) : $loop1->the_post(); if ($reset<3) : $reset++; ?> <?php $colorfilter1 = get_post_meta($post->ID, 'checkboxwhite', true); $colorfilter2 = get_post_meta($post->ID, 'checkbox_beige', true); $colorfilter3 = get_post_meta($post->ID, 'checkbox_brown', true); $colorfilter4 = get_post_meta($post->ID, 'checkbox_gray', true); $colorfilter5 = get_post_meta($post->ID, 'checkbox_black', true); $colorfilter6 = get_post_meta($post->ID, 'checkbox_vvid', true); if ($colorfilter1 != "") $colorfilter1 ="white "; if ($colorfilter2 != "") $colorfilter2 ="beige "; if ($colorfilter3 != "") $colorfilter3 ="brown "; if ($colorfilter4 != "") $colorfilter4 ="gray "; if ($colorfilter5 != "") $colorfilter5 ="black "; if ($colorfilter6 != "") $colorfilter6 ="vivid "; $class_color = $colorfilter1.$colorfilter2.$colorfilter3.$colorfilter4.$colorfilter5.$colorfilter6; ?> <div class="col-1 mcol boxes<?php if( $i%3 == 0 ) { echo '-1'; }; $i++; echo ' '.$class_color;?>" id="colbox<?php echo $id1; $id1++;?>" data-id="click" > <div class="post" id="post-<?php the_ID(); ?>"> <figure class="indent-bot"> <?php the_post_thumbnail(array(380,220,true)); ?> </figure> <div class="col-1-content"> <strong class="title-3"> <?php the_title(); ?> </strong> <div class="entry"> <?php the_excerpt(); ?> </div><!-- .entry --> </div><!-- .col-1-content--> </div><!-- .post --> </div><!-- .boxes --> <?php else : break;?> <?php endif; ?> <?php endwhile; ?> <?php $reset = 0; $offset +=3; ?> <?php wp_reset_postdata(); ?> <?php while($loop2->have_posts()) : $loop2->the_post(); if ($reset1<3) : $reset1++; ?> <?php $numbercolor1 = get_post_meta($post->ID, 'numbercolor1',true); $numbercolor2 = get_post_meta($post->ID, 'numbercolor2', true); $imgaddr1 = get_post_meta($post->ID, 'imgaddr1', true); $imgaddr2 = get_post_meta($post->ID, 'imgaddr2', true); $imgssilka1 = get_post_meta($post->ID, 'imgssilka1', true); $imgssilka2 = get_post_meta($post->ID, 'imgssilka2', true); $namecolor1 = get_post_meta($post->ID, 'namecolor1', true); $namecolor2 = get_post_meta($post->ID, 'namecolor2', true); ?> </div> <div class="full clearfix active colbox<?php echo $id2; $id2++;?>" id=""> <div class="inner"> <figure class="indent-bot1"> <a href="<?php the_permalink(); ?>" rel="nofollow"> <?php the_post_thumbnail(array(960,690)); ?> </a> </figure> <div class="row"> <div class="col-md-5"> <div class="inf-1"> <h4></h4> </div> <div class="inf-2"> <h5><?php the_title(); ?></h5> <div class="desc"> <?php the_excerpt(); ?> </div> </div> <div class="clearfix"></div> </div> <div class="col-md-7 border-left"> <div class="inf-1"> <h4><</h4> </div> <div class="inf-2"> <ul> <li class="first-child"> <a href="<?php echo $imgssilka1; ?>" class="img-block"> <img src="<?php echo $imgaddr1; ?>"> </a> <div class="txt"> <strong><?php echo $namecolor1; ?></strong> <span><?php echo $numbercolor1; ?></span> </div> </li> <li class="last-child"> <a href="<?php echo $imgssilka2; ?>" class="img-block"> <img src="<?php echo $imgaddr2; ?>"> </a> <div class="txt"> <strong><?php echo $namecolor2; ?></strong> <span><?php echo $numbercolor2; ?></span> </div> </li> </ul> </div> <div class="clearfix"></div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="c_btn"></div> </div> </div> </div><!-- .inner --> </div> <div class="container container-gallery"> <?php else : break;?> <?php endif; ?> <?php endwhile; ?> <?php $reset1 = 0; $offset1 +=3; ?> <?php wp_reset_postdata(); ?> <?php } //end if ($count <= $numberposts) } //end if ($numberposts) ?> <?php if ( have_posts() ) while ( have_posts() ) : the_post(); //   ?> <article id="post-<?php the_ID(); ?>"> <?php the_content(); ?> </article> <?php endwhile; ?> </div><!-- .container --> </section>