CODEWITHSUNDEEP
phpwordpresswhile-loopwordpress-themingcustom-wordpress-pages
Usama Shah
Usama Shah

Reputation: 9

I want every four elements in WP While Loop wrapped in a Div Container (Index.php) Wordpress

I want Every Four Cfcolumns Wrapped in One Div Container having a Class

here is my While Loop in Index Page:

<div id="left-area" style="padding-top: 58px;">
                    <!-- #custom-area -->
                    <?php while ( have_posts() ) : the_post(); ?>
                    <div class="cfcolumn">
                    <a href="<?php echo get_field('upload_pdf_book'); ?>"> <img src="<?php echo get_field('cover_picture'); ?>" alt="<?php
    the_title(); ?>" >
                    </a>
                    </div>
                    <?php endwhile; // end of the loop. ?>
                    <!-- #custom-area -->
                    </div> <!-- #left-area -->

Upvotes: 1

Views: 335

Answers (3)

RustyBadRobot
RustyBadRobot

Reputation: 566

You can also use the current_post property of $WP_Query, like so:

<?php
$args = array(
  'post_type' => 'page',
  'posts_per_page' => 5
);
$loop = new WP_Query($args);
while ($loop->have_posts()) : 
  $loop->the_post();

  if ($loop->current_post % 4 == 0) {
    echo '<div class="container">';
    echo '<div class="cfcolumn">';
    //more code here
    echo '</div>';
    echo '</div>';
  }
  else {
    echo '<div class="cfcolumn">';
    //more code here
    echo '</div>';
}
echo '</div>';
endwhile; wp_reset_postdata();
?>`

Upvotes: 0

Chris Morris
Chris Morris

Reputation: 983

You can setup a counter to count the current loop, then check if its divisible by 4 to insert and close the container before and after your content.

<div id="left-area" style="padding-top: 58px;">
    <?php $i = 1; ?>
    <?php while ( have_posts() ) : the_post(); ?>
        <?php if( $i % 4 == 0 ): ?>
            <div class="container">
        <?php endif; ?>
        <div class="cfcolumn">
            <a href="<?php echo get_field('upload_pdf_book'); ?>"> <img src="<?php echo get_field('cover_picture'); ?>" alt="<?php
                the_title(); ?>" >
            </a>
        </div>
        <?php if( $i % 4 == 0 ): ?>
            </div> <!-- close the container -->
        <?php endif; ?>
        <?php $i++; ?>
    <?php endwhile; ?>
</div>

Upvotes: 0

Stender
Stender

Reputation: 2492

I guess if you don't want to learn modulus - you can just reset your counter.

<div id="left-area" style="padding-top: 58px;">
           <!-- #custom-area -->
       <?php 
       //Initiate the counter
       $counter = 0; ?>
       <?php while ( have_posts() ) : the_post(); ?>
                <?php
                 //add 1 to the counter 
                 $counter++;
                 //If the counter = 4, then spit out the HMTL
                 if($counter == 4): ?>
                     <div class="whateverClassWrapper">
                  <?php endif; ?>
                 <div class="cfcolumn">
                     <a href="<?php echo get_field('upload_pdf_book'); ?>"> 
                        <img src="<?php echo get_field('cover_picture'); ?>" alt="<?php
the_title(); ?>" >
                     </a>
                </div>
             <?php 
             //close the HTML tag initiated by your counter
             if($counter == 4): ?>
                 </div>
              <?php 
                //Reset the counter
                $counter = 0;
              endif; ?>
        <?php endwhile; // end of the loop. ?>
        <!-- #custom-area -->
 </div> <!-- #left-area -->

This should work - but haven't tested it.

Upvotes: 1

Related Questions