ryanemitchell
7/20/2017 - 4:55 PM

Bootstrap columns with Wordpress loop

Bootstrap columns with Wordpress loop

<!--    Display Custom Post Entries with Set Number of Bootstrp Columns-->
                    <?php
                    $post_type = 'our_team';
                    $columns_num = 3; // The number of columns we want to display our posts,  value must divide number 12 (bootstrap columns) without rest. So just 1, 2, 3, 4 and 6 are acceptible.
                    $i = 0; //Counter for .row divs
                    ?>

                  <div class="row"> <!-- Open First Row -->

        <?php $loop = new WP_Query( array( 'post_type' => $post_type,
                'posts_per_page' => 20,
                ‘category_name => ‘news’,
                ‘Author_name’ => ‘matt’ )
        );
        while ( $loop->have_posts() ) : $loop->the_post();
        
                      echo '<div class="single-product-archive col-md-' . 12 / $columns_num . '">' ?>

            <?php // ********** BEGIN COLUMN CONTENT *********** // ?>

                        <h1><?php echo get_the_title(); ?> </h1>
                        <div class="the_content">
                            <?php the_content(); ?>
                        </div>

            <?php // ********** END COLUMN CONTENT *********** // ?>

                <?php     echo '</div>'; // ?>

                <?php if($i % $columns_num == $columns_num - 1 ) {
                      echo '</div> <div class="row">';
                        }

                        $i++; ?>

        <?php endwhile; wp_reset_query(); ?>


</div> <!-- CLose Last Row -->