WordPress custom theme grid with bootstrap

1 Views

I am trying to display a 3 posts per row grid in WordPress with PHP and Bootstrap. The theme I am using has custom PHP in the background, but there are functions which help during the display of the post items, names, subtitles etc. The grid works fine, but the problem is that the theme’s function ggt_section_loop() displays all posts at once rather than one by one. For example if you have 5 posts the result should be 3 columns and 2 rows. What I get is 5 posts when I need a single post. Here is my short code: 

<div class="container">
<?php if(ggt_section_field("show_as_grid") == "true") { ?>
    <?php if(ggt_section_loop_posts_count() != 0) { ?>

    <div class="row">
     <?php for($i=0; $i < ggt_section_loop_posts_count(); $i++) { ?>

            <?php if($i%3 == 0) { ?>
                </div><div class="row">
            <?php } ?>

            <div class="section_heading col-xs-4 col-sm-4 col-md-4 col-lg-4">
                <?php echo ggt_section_loop(); ?>
            </div>

         <?php } ?>
    </div>
</div>

The HTML output

Read More
<div class="container">
<div class="row">
<div class="section_heading col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="teams_item k-frames text-center section-light">
<div class="teams_item k-frames text-center section-light">
<div class="teams_item k-frames text-center section-light">
<div class="teams_item k-frames text-center section-light">
<div class="teams_item k-frames text-center section-light">
</div>
<div class="section_heading col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="teams_item k-frames text-center section-light">
<div class="teams_item k-frames text-center section-light">
<div class="teams_item k-frames text-center section-light">
<div class="teams_item k-frames text-center section-light">
<div class="teams_item k-frames text-center section-light">
</div>
<div class="section_heading col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="teams_item k-frames text-center section-light">
<div class="teams_item k-frames text-center section-light">
<div class="teams_item k-frames text-center section-light">
<div class="teams_item k-frames text-center section-light">
<div class="teams_item k-frames text-center section-light">
</div>
</div>
<div class="row">
<div class="section_heading col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="teams_item k-frames text-center section-light">
<div class="teams_item k-frames text-center section-light">
<div class="teams_item k-frames text-center section-light">
<div class="teams_item k-frames text-center section-light">
<div class="teams_item k-frames text-center section-light">
</div>
<div class="section_heading col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="teams_item k-frames text-center section-light">
<div class="teams_item k-frames text-center section-light">
<div class="teams_item k-frames text-center section-light">
<div class="teams_item k-frames text-center section-light">
<div class="teams_item k-frames text-center section-light">
</div>
</div>

Is there a way for the extra posts to be “skipped” somehow?

Post Views: 1

Related posts