Skip to content

Instantly share code, notes, and snippets.

@neilgee
Last active September 29, 2019 05:25
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save neilgee/debee663436d0d4fe748159ac5d1bb9d to your computer and use it in GitHub Desktop.
Using Responsive Tabs and ACF repeater fields
<?php
add_action( 'pick_your_hook', 'themeprefix_color_content' ); // Add a hook in for your theme
// 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>';
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment