Wrap 3 PHP loop items in a div

Question

I am working on a WordPress theme but I believe my question is related to PHP which is why I am posting here. Kindly correct me if I am wrong.

I am trying to wrap a set of each 3 loop items in a div tag but something is not right. Below is the code of what I have done so far but it always ends up with broken div.

<?php if ( have_posts() ) : $i = 0; while ( have_posts() )  : the_post(); ?>
        <?php if ( $i % 3 ==  0) : ?>
            <div class="articles-loop clearfix">
        <?php endif; ?>
        <article itemtype="https://schema.org/CreativeWork" <?php post_class(); ?>>
            <header class="entry-header">
                <h2 class="entry-title" itemprop="headline">
                    <a href="<?php the_permalink(); ?>" class="entry-title-link" rel="bookmark"><?php the_title(); ?></a>
                </h2>
            </header>
            <div class="entry-content">
                <?php if ( has_post_thumbnail() ) : ?>
                    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
                        <?php the_post_thumbnail('generic-grid-archive-featured'); ?>
                    </a>
                <?php endif; ?>

                <?php if ( has_excerpt() ): ?>
                    <p><?php $excerpt = excerpt(23); echo strip_tags($excerpt); ?></p>
                <?php else : ?>
                    <p><?php $content = content(23); echo strip_tags($content); ?></p>
                <?php endif; ?>
            </div>
            <!--
            <footer class="entry-footer">
                <div class="entry-meta clearfix">
                    <p class="read-more"><a href="<?php /*the_permalink(); */?>">Continue Reading</a></p>
                    <p class="author">Published by: <?php /*$author = get_the_author(); echo $author; */?></p>
                </div>
            </footer>
            -->
        </article>
        <?php if ( $i % 3 != 0 ) : ?>
            </div>
        <?php endif; ?>
        <?php $i++; endwhile; ?>
        <?php if ( $i % 3 != 0 ) : ?>
            </div>
        <?php endif; ?>
    <?php else: ?>
        <p><?php esc_html_e( 'Sorry, no posts matched your criteria.' ); ?></p>
    <?php endif; ?>

Example of what I want to achieve:

<div class="articles-loop clearfix">
Loop item 1
Loop item 2
Loop item 3
</div>
<div class="articles-loop clearfix">
Loop item 4
Loop item 5
Loop item 6
</div>
etc.

Shivendra Singh · Accepted Answer · 2019-06-19 11:31:39Z

Try the below code:

<?php
     $loop_counter = $innerBreak = 1;
        $wpb_all_query = new WP_Query(array('post_type'=>'page', 'post_status'=>'publish', 'posts_per_page'=>6));
        if($wpb_all_query->have_posts()):
        while($wpb_all_query->have_posts()) :
        $wpb_all_query->the_post();
        if($innerBreak == 1){
        ?>

        <!-- when complete listing of 3 post open the new div -->
        <div class="articles-loop clearfix">

        <?php
        }
        ?>
         <article itemtype="https://schema.org/CreativeWork" <?php post_class(); ?>>
                    <header class="entry-header">
                        <h2 class="entry-title" itemprop="headline">
                            <a href="<?php the_permalink(); ?>" class="entry-title-link" rel="bookmark"><?php the_title(); ?></a>
                        </h2>
                    </header>
                    <div class="entry-content">
                        <?php if ( has_post_thumbnail() ) : ?>
                            <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
                                <?php the_post_thumbnail(); ?>
                            </a>
                        <?php endif; ?>

                        <?php /*if ( has_excerpt() ): ?>
                            <p><?php $excerpt = excerpt(23); echo strip_tags($excerpt); ?></p>
                        <?php else : ?>
                            <p><?php $content = content(23); echo strip_tags($content); ?></p>
                        <?php endif;*/ ?>
                    </div>
                    <!--
                    <footer class="entry-footer">
                        <div class="entry-meta clearfix">
                            <p class="read-more"><a href="<?php /*the_permalink(); */?>">Continue Reading</a></p>
                            <p class="author">Published by: <?php /*$author = get_the_author(); echo $author; */?></p>
                        </div>
                    </footer>
                    -->
                </article>
        <?php 

        //when complete listing of 3 post closed previously div.
        if($loop_counter%3==0){ echo '</div>'; $innerBreak = 1;}else{$innerBreak = 0;}

        $loop_counter++; endwhile; 
        else: 
        echo "<div>No Results Found</div>";
        endif;  
        ?>

Collectives™ on Stack Overflow

Wrap 3 PHP loop items in a div

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related