Wordpress custom posts create new row when parent children is <=3 - php

Question

I have a custom post type in wordpress that adds new agents to a row. How can I create a conditional statement that checks the amount of posts in the row and if greater than 4 posts create a new div and append the new posts to a new row?
<?php get_header(); ?>
<div class="agent-wrap">
<?php
$args = array(
'post_type' => 'agents',
'post_status' => 'publish',
'posts_per_page' => '12'
);
$agents_loop = new WP_Query( $args );
if ( $agents_loop->have_posts() ) : ?>
<div class="agent-row">
<?php
while ( $agents_loop->have_posts() ) : $agents_loop->the_post();
// variables
$name = get_field( 'agent_name' );
$position = get_field( 'agent_position' );
$phone = get_field( 'agent_phone' );
$email = get_field( 'agent_email' );
$image = get_field( 'agent_image' );
$link = get_the_permalink();
?>
<a href="<?php echo $link; ?>">
<div class="agent">
<div class="agent-bg"></div>
<div class="agent-content">
<h3><?php echo $name; ?></h3>
<h5><?php echo $position; ?></h5>
<hr class="divider" />
<?php echo $phone; ?> <i class="fa fa-phone"></i>
<?php echo $email; ?> <i class="fa fa-envelope"></i>
</div>
<img src="<?php echo $image; ?>">
</div>
</a>
<?php
endwhile;
wp_reset_postdata();
endif;
?>
</div>
</div>
<?php get_footer(); ?>
Desired HTML structure
<div class="agent-row">
<!-- only 4 agents post types per row -->
<div class="agent"></div>
<div class="agent"></div>
<div class="agent"></div>
<div class="agent"></div>
</div>
<!-- New Row After first row reaches 4 agent posts -->
<div class="agent-row">
</div>

Answer 1

wp_query has a property called "current_post" which is the index of the post currently being displayed. You could use it inside the "while" loop to construct your layout.
"current_post" starts from zero, meaning if you need the first 4 posts, it'd be the posts with index 0, index 1, index 2 and index 3. Thus you can use if ($agents_loop->current_post <= 3) {} for the first layout and if ($agents_loop->current_post > 3) {} for the second layout:
if ($agents_loop->have_posts()) : ?>
<div class='agent-row'>
<?php
while ($agents_loop->have_posts()) : $agents_loop->the_post();
if ($agents_loop->current_post <= 3) {
$name = get_field('agent_name');
$position = get_field('agent_position');
$phone = get_field('agent_phone');
$email = get_field('agent_email');
$image = get_field('agent_image');
$link = get_the_permalink();
?>
<a href='<?php echo $link; ?>'>
<div class='agent'>
<div class='agent-bg'></div>
<div class='agent-content'>
<h3><?php echo $name; ?></h3>
<h5><?php echo $position; ?></h5>
<hr class='divider' />
<a href='tel:<?php echo $phone; ?>'><?php echo $phone; ?> <i class='fa fa-phone'></i></a>
<a href='mailto:<?php echo $email; ?>'><?php echo $email; ?> <i class='fa fa-envelope'></i></a>
</div>
<img src='<?php echo $image; ?>'>
</div>
</a>
<?php
}
endwhile;
?>
</div>
<!-- New Row After first row reaches 4 agent posts -->
<div class='agent-row'>
<?php
while ($agents_loop->have_posts()) : $agents_loop->the_post();
if ($agents_loop->current_post > 3) {
# Put your desired layout here
}
endwhile;
?>
</div>
<?php
wp_reset_postdata();
endif;
To avoid layout duplication, you can create a template file and include or require it in the loops.
To avoid duplication for the agent layout
Simply create a php file and called it agent-info.php in your theme.
agent-info.php
<a href='<?php echo $link; ?>'>
<div class='agent'>
<div class='agent-bg'></div>
<div class='agent-content'>
<h3><?php echo $name; ?></h3>
<h5><?php echo $position; ?></h5>
<hr class='divider' />
<a href='tel:<?php echo $phone; ?>'><?php echo $phone; ?> <i class='fa fa-phone'></i></a>
<a href='mailto:<?php echo $email; ?>'><?php echo $email; ?> <i class='fa fa-envelope'></i></a>
</div>
<img src='<?php echo $image; ?>'>
</div>
</a>
And use include or require functions to use the template in your loops.