php - How to display 8 posts in four columns and 2 rows on a carousel slide?

I am trying to achieve a grid layout as such that posts will be visible on a carousel slider. Each slide will consist of 8 posts. 4 posts per row.

I am using bootstrap as well.

I want html to look like:

<div class="slider_container">
<div class="services-slide">
<div class="row">
<div class="col-md-3">
<div class="box-desc">
<h4>title 1</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 2</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 3</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 4</h4>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="box-desc">
<h4>title 5</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 6</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 7</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 8</h4>
</div>
</div>
</div>
<div class="services-slide">
<div class="row">
<div class="col-md-3">
<div class="box-desc">
<h4>title 9</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 10</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 11</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 12</h4>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="box-desc">
<h4>title 13</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 14</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 15</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 16</h4>
</div>
</div>
</div>
</div>

Here is my code but it is not working though.

<div class="slider_container">
<?php
ob_start();
$args = array( 'post_type' => 'services','posts_per_page' =>-1,'order' => 'ASC');
$the_query = new WP_Query($args);
if ($the_query->have_posts()) : 
$i = 0;
$o = 0;
  ?>
<?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
<div class="services-slide">
 <div class="row">
   <?php if ($i == 4) { $i = 0; ?>
    </div>
    <div class="row">
   <?php } ?>
   <div class="col-md-3">
       <div class="box-desc">
            <h4><?php echo get_the_title(); ?></h4>
        </div>
    </div>
</div>
  <?php $i++; ?>
</div>
<?php endwhile; ?>
<?php
endif;
wp_reset_postdata();
$content = ob_get_contents();
ob_end_clean();
return $content; ?>
</div>

Please help.

I am trying to achieve a grid layout as such that posts will be visible on a carousel slider. Each slide will consist of 8 posts. 4 posts per row.

I am using bootstrap as well.

I want html to look like:

<div class="slider_container">
<div class="services-slide">
<div class="row">
<div class="col-md-3">
<div class="box-desc">
<h4>title 1</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 2</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 3</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 4</h4>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="box-desc">
<h4>title 5</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 6</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 7</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 8</h4>
</div>
</div>
</div>
<div class="services-slide">
<div class="row">
<div class="col-md-3">
<div class="box-desc">
<h4>title 9</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 10</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 11</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 12</h4>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="box-desc">
<h4>title 13</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 14</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 15</h4>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>title 16</h4>
</div>
</div>
</div>
</div>

Here is my code but it is not working though.

<div class="slider_container">
<?php
ob_start();
$args = array( 'post_type' => 'services','posts_per_page' =>-1,'order' => 'ASC');
$the_query = new WP_Query($args);
if ($the_query->have_posts()) : 
$i = 0;
$o = 0;
  ?>
<?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
<div class="services-slide">
 <div class="row">
   <?php if ($i == 4) { $i = 0; ?>
    </div>
    <div class="row">
   <?php } ?>
   <div class="col-md-3">
       <div class="box-desc">
            <h4><?php echo get_the_title(); ?></h4>
        </div>
    </div>
</div>
  <?php $i++; ?>
</div>
<?php endwhile; ?>
<?php
endif;
wp_reset_postdata();
$content = ob_get_contents();
ob_end_clean();
return $content; ?>
</div>

Please help.

• php
• posts

Share Improve this question asked Jul 25, 2021 at 10:22 codieboiecodieboie 4522 silver badges1010 bronze badges 5

• What slider are you using? it would be easier to replicate this design if you could tell which one you are using? Also if you could indent you code it would make it easier to read/understand – Buttered_Toast Commented Jul 25, 2021 at 10:30
• I am using slick slider. Slick slider is triggered with the slider_container class. – codieboie Commented Jul 25, 2021 at 11:01
• I think you better user swiper slider and use this type of slider. Slick doesn't come with a grid option so if you want a simpler structure try using swiper. – Buttered_Toast Commented Jul 25, 2021 at 11:25
• It cant be achieved using php? – codieboie Commented Jul 25, 2021 at 12:27
• Sure you can, im just suggesting using swiper because it will be easier as this library has a built it option for exactly that kind of slider. If you still want to achive that design with slick slider you can. As soon as I can Ill give you an example – Buttered_Toast Commented Jul 25, 2021 at 12:28

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Its very difficult to understand from the HTML code example what you are trying to achieve but going by the php you could do the following.

<?php
$posts = new WP_Query([
    'post_type'      => 'services',
    'posts_per_page' => -1,
    'order'          => 'ASC'
]);

if ($posts->have_posts()) :
?>
<ul class="slider-container">
    <?php
    $loop_position = 1;
    while ($posts->have_posts()) {
        $posts->the_post();

        // if loop position is greater than our threshold (8) reset to initial position (1)
        if ($loop_position > 8) $loop_position = 1;

        // if we are in the first loop (loop position 1) itiration create the slide open tag
        if ($loop_position === 1) echo '<li class="single-slide">';

        // if we are in the first/fifth loop (loop position 1/5) itiration create the row open tag
        if (in_array($loop_position, [1,5])) echo '<div class="row">';

        // here we can simply output each loop itiration html as we need
        echo '<div class="col-md-3">';
        echo     '<div class="box-desc">';
        echo         "<h4>Some title {$loop_position}</h4>";
        echo     '</div>';
        echo '</div>';

        // if we reached the end of the loop (no more post) we need to close all the tags
        // starting from row than single-slide
        if ($posts->found_posts == $loop_position) {
           echo '</div></li>';
           
           // to prevent the rest of the code from executing we exit out of the loop, using break
           break;
        }

        // if we are in the fourth/eighth loop (loop position 4/8) itiration create the row closing tag
        if (in_array($loop_position, [4,8])) echo '</div>';

        // if we are in the last loop (loop position 8) itiration create the slide closing tag
        if ($loop_position === 8) echo '</li>';

        // increate loop position by 1
        $loop_position++;
    }
    ?>
</ul>
<?php
endif;
wp_reset_postdata();
?>

The HTML output would be the following

<ul class="slider-container">
    <li class="single-slide">
        <div class="row">
            <div class="col-md-3">
                <div class="box-desc">
                    <h4>Some title 1</h4>
                </div>
            </div>
            <div class="col-md-3">
                <div class="box-desc">
                    <h4>Some title 2</h4>
                </div>
            </div>
            <div class="col-md-3">
                <div class="box-desc">
                    <h4>Some title 3</h4>
                </div>
            </div>
            <div class="col-md-3">
                <div class="box-desc">
                    <h4>Some title 4</h4>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <div class="box-desc">
                    <h4>Some title 5</h4>
                </div>
            </div>
            <div class="col-md-3">
                <div class="box-desc">
                    <h4>Some title 6</h4>
                </div>
            </div>
            <div class="col-md-3">
                <div class="box-desc">
                    <h4>Some title 7</h4>
                </div>
            </div>
            <div class="col-md-3">
                <div class="box-desc">
                    <h4>Some title 8</h4>
                </div>
            </div>
        </div>
    </li>
    <li class="single-slide">
        <div class="row">
            <div class="col-md-3">
                <div class="box-desc">
                    <h4>Some title 1</h4>
                </div>
            </div>
            <div class="col-md-3">
                <div class="box-desc">
                    <h4>Some title 2</h4>
                </div>
            </div>
            <div class="col-md-3">
                <div class="box-desc">
                    <h4>Some title 3</h4>
                </div>
            </div>
            <div class="col-md-3">
                <div class="box-desc">
                    <h4>Some title 4</h4>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <div class="box-desc">
                    <h4>Some title 5</h4>
                </div>
            </div>
            <div class="col-md-3">
                <div class="box-desc">
                    <h4>Some title 6</h4>
                </div>
            </div>
        </div>
    </li>
</ul>

As we decided every eight (8) posts receive their own slick slide, in every slick slide, every four (4) posts are wrapped with a <div class="row">...</div> tag.

I personally think that this is a bit of overkill and over complication, you could achieve the same result without using bootstrap for layout and instead use css grid.

If you would like I could edit my answer to include the non bootstrap layout