CODEWITHSUNDEEP
wordpressadvanced-custom-fields
Tepken Vannkorn
Tepken Vannkorn

Reputation: 9723

Get all wordpress posts and display 3 posts in a row

I have a custom post type that use advance custom field to enable users to enter content. I want to get all that posts and display them 3 posts in a row. Let say:

<div class="row">
  <div class="col-md-4">...</div>
  <div class="col-md-4">...</div>
  <div class="col-md-4">...</div>
</div>
<div class="row">
  <div class="col-md-4">...</div>
  <div class="col-md-4">...</div>
  <div class="col-md-4">...</div>
</div>
...

The problem is that it displays all the posts in the <div class="row"></div> like this:

<div class="row">
   <div class="col-md-4">...</div>
   <div class="col-md-4">...</div>
   <div class="col-md-4">...</div>
   <div class="col-md-4">...</div>
   ...
</div>

Below is my code that I have tried so far:

<div class="row">
    <?php
        $args = array(
            'post_type' => 'team',
            'order' => 'ASC'
        );
        $the_query = new WP_Query( $args );

        while ( $the_query->have_posts() ) {
            $the_query->the_post();
            get_template_part('content', 'team');
        }
    ?>
</div>

My content_team.php:

<div class="col-md-4">
    <h3><?php the_field('name'); ?></h3>
    <img src="<?php the_field('photo'); ?>" alt="<?php the_field('name'); ?>" />
    <p class="smallTitle"><?php the_field('position'); ?></p>
    <p><?php the_field('biography'); ?></p>
</div>

Upvotes: 0

Views: 2187

Answers (1)

Khushboo
Khushboo

Reputation: 1817

Try below :-

<div class="row">
<?php
$i = 1;
while ( $the_query->have_posts() ) {

  $the_query->the_post();
        get_template_part('content', 'team');

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

Upvotes: 2

Related Questions