Create a new Row after 3 Columns

• MilosTC

• January 4, 2022 at 6:22 am

Hi guys,

I’m trying to achieve the following for a repeater – create a new div.row once 3 columns have been added. In a nutshell, maximum of 3 columns show be shown on the front-end, and it should create new rows as new columns are added in.

Here’s the current code – I managed to make it so the repeater stops after 3 columns have been made, but I don’t know how to make it so it creates a new row with a new set of 3 columns (I currently have 6 columns added inside the page’s ACF).

Looking forward to your help… thank you!

<?php

$teams = get_sub_field('team');

?>
<div id="team"></div>
	<div class="container">
<?php if($teams) {
	$i = 0;
	$after = '';
	$display = 2; // display maximum of 3 columns inside of a row
	?>

		<div class="row">
			<?php foreach($teams as $team) {
				if($team['description']) {
					$after .= '<div class="ab-team-desc m-b-125" data-id="'.++$i.'" style="display:none"><div class="ab-team-desc-content bg-white p--40">'.$team['description'];
					if($team['read_more_url']) {
						$after .= '<div class="m-t-10"><a href="'.$team['read_more_url'].'" class="fs-13 text-uppercase letter-spacing-250 color-orange font-visbycf-demibold">Read More</a></div>';
					}
					$after .= '</div></div>';
				}
				?>
				<div class="col-md-4 ab-team-item">
					<div class="ab-team text-center" data-id="<?=$i?>" data-scroll-animate="fadeIn">
						<div class="ab-team-image">
							<img src="<?=\AB\Template\get_image_url($team['image'])?>" alt="">
						</div>
						<div class="ab-team-content">
							<div class="ab-team-name font-windsor-bold fs-21"><?=$team['name']?></div>
							<div class="ab-team-position text-uppercase fs-12 letter-spacing-200"><b><?=$team['position']?></b></div>
							<div class="ab-team-social-media">
								<ul>
									<?=$team['social_media']?>
								</ul>
							</div>
						</div>
					</div>
				</div>
			<?php if ($i > $display) { break; } ?>
			<?php } ?>
			<?php if($after) { ?>
				<div class="m-t-50"><?=$after?></div>
			<?php } ?>
		</div>

<?php } ?>
	</div><!-- end .container -->

• MilosTC

• January 4, 2022 at 7:48 am

Following up – I decided to use nested repeater approach for this, however it’s producing an endless loop for the following code:

<?php

$team = get_sub_field('team_section');

?>

<div id="team" class="d-none d-md-block m-t-90 p-b-100 border-bee border-bee-vertical border-bee--gray border-bee--left"></div>
	<div class="container">

		<?php while ( have_posts() ) : the_post(); ?>

			<?php

			// check for rows (parent repeater)
			if( have_rows('about_team_sections') ): ?>
				<div id="team">
				<?php
				// loop through rows (parent repeater)
				while( have_rows('about_team_sections') ): the_row(); ?>
					<div class="row team-row">
						<?php
						// check for rows (sub repeater)
						if( have_rows('team_section') ): ?>

							<?php
							// loop through rows (sub repeater)
							while( have_rows('team_section') ): the_row();

								// display columns
								?>

								<div class="col-md-4 ab-team-item">
									<div class="ab-team text-center" data-id="<?=$i?>" data-scroll-animate="fadeIn">
										<div class="ab-team-image">
											<img src="<?=\AB\Template\get_image_url($team['image'])?>" alt="">
										</div>
										<div class="ab-team-content">
											<div class="ab-team-name font-windsor-bold fs-21"><?=$team['name']?></div>
											<div class="ab-team-position text-uppercase fs-12 letter-spacing-200"><b><?=$team['position']?></b></div>
											<div class="ab-team-social-media">
												<ul>
													<?=$team['social_media']?>
												</ul>
											</div>
										</div>
									</div>
								</div>

							<?php endwhile; ?>

						<?php endif; //if( get_sub_field('team_section') ): ?>
					</div>

				<?php endwhile; // while( has_sub_field('about_team_sections') ): ?>
				</div>
			<?php endif; // if( get_field('about_team_sections') ): ?>

		<?php endwhile; // end of the loop. ?>
	</div><!-- end .container -->

• MilosTC

• January 4, 2022 at 8:20 am

Another follow up with a solution, hopefully this helps someone – the first “while” was producing an infinite loop: <?php while ( have_posts() ) : the_post(); ?>

Once that was removed I managed to make this working, here’s the full code:

<?php

$i = 0;
?>

<div id="team" class="d-none d-md-block m-t-90 p-b-100 border-bee border-bee-vertical border-bee--gray border-bee--left"></div>
	<div class="container">
			<?php
			// check for rows (parent repeater)
			if( have_rows('about_team_sections') ): ?>
				<?php
				// loop through rows (parent repeater)
				while( have_rows('about_team_sections') ): the_row(); ?>
					<div class="row team-row">
						<?php
						// check for rows (sub repeater)
						if( have_rows('team_section') ): ?>
							<?php
							// loop through rows (sub repeater)
							while( have_rows('team_section') ): the_row();
								// display columns
								?>
								<div class="col-md-4 ab-team-item">
									<div class="ab-team text-center" data-id="<?=$i?>" data-scroll-animate="fadeIn">
										<div class="ab-team-image">
											<img src="<?=\AB\Template\get_image_url(get_sub_field('image'))?>" alt="">
										</div>
										<div class="ab-team-content">
											<div class="ab-team-name font-windsor-bold fs-21"><?=get_sub_field('name')?></div>
											<div class="ab-team-position text-uppercase fs-12 letter-spacing-200"><b><?=get_sub_field('position')?></b></div>
											<div class="ab-team-social-media">
												<ul>
													<?=get_sub_field('social_media')?>
												</ul>
											</div>
										</div>
									</div>
								</div><!-- end .ab-team-item -->
							<?php endwhile; ?>
						<?php endif; //if( get_sub_field('team_section') ): ?>
					</div>
				<?php endwhile; // while( has_sub_field('about_team_sections') ): ?>
			<?php endif; // if( get_field('about_team_sections') ): ?>
	</div><!-- end .container -->