Add div after every three items in a loop?

2 Views

I am working with a WP website and in my template I am running the loop like this: 

<!-- START LOOP -->
                <?php while ( have_posts() ) : the_post(); ?>

                    <div class="row" style="margin:15px 0;">
                        <div class="twelve columns">
                            <div class="four columns">
                                <a href="<?php the_permalink(); ?>">
                                    <?php 
                                        if ( has_post_thumbnail() ) {
                                            the_post_thumbnail( 'medium' );
                                        } else {
                                            echo 'No Preview Available'; 
                                        } 
                                    ?>
                                </a>
                            </div>
                            <div class="eight columns">

                                <h3><a href="<?php the_permalink(); ?>"><?php the_title() ?></a></h3>
                                <p><?php the_excerpt() ?></p>
                                <p><a href="<?php echo esc_html( get_post_meta( get_the_ID(), 'portfolio_website', true ) ); ?>" target="_blank"><?php echo esc_html( get_post_meta( get_the_ID(), 'portfolio_website', true ) ); ?></a></p>

                            </div>  

                        </div>
                    </div>
                    <hr />

                <?php endwhile; ?>

Because this is a responsive website, I am trying to get a grid column look. The problem I am having is how I can insert a div with a class or “row container” after every third item?

Read More

I know I probably just confused the crap out of you because I confuse myself but in short the html would look like this: 

<div class="row container">
    <!-- item 1 -->
    <div class="twelve columns">
        <div class="four columns">IMAGE HERE</div>
        <div class="eight columns">TEXT HERE</div>
    </div>

    <!-- item 2 -->
    <div class="twelve columns">
        <div class="four columns">IMAGE HERE</div>
        <div class="eight columns">TEXT HERE</div>
    </div>

    <!-- item 3 -->
    <div class="twelve columns">
        <div class="four columns">IMAGE HERE</div>
        <div class="eight columns">TEXT HERE</div>
    </div>

    <!-- item 4 -->
    <div class="twelve columns">
        <div class="four columns">IMAGE HERE</div>
        <div class="eight columns">TEXT HERE</div>
    </div>
</div>

and so on, instead I would like it to display in a grid so the HTML should look more like this: 

<div class="row container">
    <!-- row 1 -->
    <div class="twelve columns">
        <div class="four columns">
            <!-- item 1 -->
            <div class="four columns">IMAGE HERE</div>

            <!-- item 2 -->
            <div class="four columns">IMAGE HERE</div>

            <!-- item 3 -->
            <div class="four columns">IMAGE HERE</div>
        </div>
    </div>

    <!-- row 2 -->
    <div class="twelve columns">
        <div class="four columns">
            <!-- item 4 -->
            <div class="four columns">IMAGE HERE</div>

            <!-- item 5 -->
            <div class="four columns">IMAGE HERE</div>

            <!-- item 6 -->
            <div class="four columns">IMAGE HERE</div>
        </div>
    </div>
</div>

I can do everything else Im just not sure how to implement the below so I get the results I pasted above? I have found this online and feel like it is a step in the right direction: 

<?php ($i % 3) == 0 ?>
Post Views: 2

Related posts

Leave a Reply

3 comments

  1. Your feelings are right.

    You can use the $current_post property of the WP_Query class to get the index of the post currently displayed in the loop, and then use the modulus operator to make sure you are targeting multiples of three.

    So your loop could look like this:

     <div class="row container">
      <!-- row -->
      <div class="twelve columns">
           <div class="four columns">
      <?php while ( have_posts() ) : the_post(); ?>

                <!-- item -->            
                <div class="four columns">IMAGE HERE</div>

      <?php if( $wp_query->current_post % 3 == 0 ) : ?>
           </div>
      </div>
      <!-- row -->
      <div class="twelve columns">
           <div class="four columns">
      <?php endif; ?>        
      <?php endwhile; ?>
</div>

    You might need to improve this implementation. Specifically, make sure that, whatever happens, your HTML closes correctly.

  2. What I needed was a counter:

    <!-- START LOOP -->
            <?php $counter = 1 ?>
            <div class="row" style="margin:15px 0;">
                    <div class="twelve columns">
            <?php while ( have_posts() ) : the_post(); ?>


                        <div class="four columns">
                            <a href="<?php the_permalink(); ?>">
                                <?php 
                                    if ( has_post_thumbnail() ) {
                                        the_post_thumbnail( 'medium' );
                                    } else {
                                        echo 'No Preview Available'; 
                                    } 
                                ?>
                            </a>
                        </div>  
                        <?php if ($counter % 3 == 0){echo '</div></div></hr /><div class="row" style="margin:15px 0;"><div class="twelve columns">';} ?>                            


            <?php $counter++ ; 
            endwhile; ?>
            </div>
            </div>

  3. <?php
 
$currentPage = get_query_var('paged');
 
 
// General arguments
 
$posts = new WP_Query(array(
    'post_type' => 'post', // Default or custom post type
    'posts_per_page' => 11, // Max number of posts per page
    'paged' => $currentPage
));
 


// Content display
$i = 0;            
if ($posts->have_posts()) :
    while ($posts->have_posts()) :
        $posts->the_post();
        if( $i % 3 == 0 )      
            echo '<section class="columns">';
               
        echo "<div class='column'>";
               ?>
             
                    <h2><?php the_title(); ?></h2>
                    <p><?php the_excerpt(); ?></p>
            
               <?php        
        
        echo "</div>";  
               $i++;
             
             if( $i % 3 == 0 )     
            echo '</section>';
             
    endwhile;
endif;
 
?>
               
        
            
             
            <?php
             
// Bottom pagination (pagination arguments)
 
echo "<div class='page-nav-container'>" . paginate_links(array(
    'total' => $posts->max_num_pages,
    'prev_text' => __('<'),
    'next_text' => __('>')
)) . "</div>";
             
             ?>