Adding & Sorting ACF Repeater Field Data into Responsive Tabs

Using responsive tabs and ACF repeater field you can present a clean easy to use client back end field submission in the WP Admin dashboard that can sort repeater field data into appropriate tabbed content. The front end display to the end user is intuitive and fast.

The 2 links above describe how to set up Responsive Tabs and ACF Repeater fields, so they are not repeated here and the layout is done with Flexbox, touched on here.

tabbed-content

 

tabbed-content-mobile

Smaller device

The outer tabs sort applicable content when clicking on them.

 

acf-client-end-form

Client front end is easy to add, edit and sort (radio button above is different than in below code – below has been simplified just using 3 colors as values).

ACF Radio Button as a repeater field

acf-radio-button-values

Example of how the ACF repeater field is set up – field type is radio button with choices entered as value and label.

The Code

<?php
add_action( 'genesis_entry_content', 'themeprefix_color_content' );
// ACF Values
// themeprefix_colors Main Repeater Field
// themeprefix_color sub-field - list of color values in a single radio button field
// Other Sub fields
// themeprefix_session
// themeprefix_price
// themeprefix_details
// themeprefix_link
// themeprefix_link_text
function themeprefix_color_content() {
// Set an array that matches the themeprefix_color sub field in ACF that has a radio button single selection from multiple choices
$colors = array( 'red', 'green', 'blue' );
// Set up master tab headers, using the array for the labels and a counter increment for each anchor link in the li tag
// Loop through the foreach loop values which correspond to the repeater sub field
echo '<div id="tabs1">
<ul>';
foreach ($colors as $color) {
global $b;
$b++;
echo "<li><a href='#tab-{$b}'>" . ucfirst($color) . "</a></li>";
}
echo '</ul>';
// Set up the tab content again matching the foreach array values and again with a counter increment
// Loop through the foreach loop values which correspond to the repeater sub field
foreach ($colors as $color) {
global $i;
$i++;
// loop through the repeater rows of data
echo "<div id='tab-{$i}'>
<ul class='colors'>";
while ( have_rows('themeprefix_colors') ) : the_row();
if(get_sub_field('themeprefix_color') == "{$color}"):
// display the repeater sub field values
echo '<li>
<h3>' . get_sub_field('themeprefix_session') . '</h3>
<p class="price"><sup>$</sup>' . get_sub_field('themeprefix_price') . '</p>
<p class="details">' . get_sub_field('themeprefix_details') . '</p>
<a class="button" href="' . get_sub_field('themeprefix_link') . '"><p>' . get_sub_field('themeprefix_link_text') . '</p></a>
</li>';
endif;
endwhile;
echo '</ul>';
echo '</div>';
}
echo '</div>';
}
genesis();
view raw package.php hosted with ❤ by GitHub

In the above gist I am using a $colors array in my foreach loop consisting of red, green and blue.

These match the ACF repeater field values in the radio button field.

The foreach loop deals with the known values of red, green and blue and the while loop looks after the repeater data. This is a way that you can sort and display certain type of ACF repeater fields based on a value the user has made and in this instance those values are being grouped into the relevant tab.

Demo

 

*I have added a further bit to this by getting the colors array straight out of the ACF repeater sub-field choices (or values) that way you don’t have to manually manage the $colors array.

Leave a Comment





%d bloggers like this: