Last active
May 10, 2023 16:39
-
-
Save Garconis/243bb298ede6158ab4b7ba36c50113f4 to your computer and use it in GitHub Desktop.
WordPress + Impreza | Create shortcode to output accordions based on ACF repeater fields
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/* ACF Case Study Key Features accordion shortcode recreation, used within the Case Study page template */ | |
// [fs_key_features_accordion] | |
function fs_sc_key_features_accordion( $atts ){ | |
// begin output buffering | |
ob_start(); | |
if( have_rows('cs_key_website_features') ) { | |
// Impreza accordion shortcode example, that we mimic below with our variables and while loop: | |
/* | |
[vc_tta_accordion title_tag="h3" c_icon="plus"] | |
[vc_tta_section title="Title in here" el_id="casestudy-key-feature-1"][vc_column_text]Text goes in here[/vc_column_text][/vc_tta_section] | |
[vc_tta_section title="Second Title in here"][vc_column_text]Second Text goes in here[/vc_column_text][/vc_tta_section] | |
[/vc_tta_accordion] | |
*/ | |
// start section counter at 1, that we can then increase by one for each loop iteration, used for a unique ID per accordion toggle | |
$repeater_counter = 1; | |
// starting shortcode piece | |
$accordion_start = '[vc_tta_accordion title_tag="h3" c_icon="plus"]'; | |
// initially set the sections as empty, to define the variable | |
$accordion_sections = ''; | |
while ( have_rows('cs_key_website_features') ) : the_row(); | |
// vars | |
$title = get_sub_field('cs_key_feature_title'); | |
$description = get_sub_field('cs_key_feature_description'); | |
// create the number variable, of which we add 1 for each new iteration, that we can then use on the toggle ID | |
$section_counter_number = $repeater_counter++; | |
// the ID that we add to each iterataion, within the Impreza shortcode el_id attribute | |
$accordion_section_id = 'casestudy-key-feature-' . $section_counter_number; | |
// the actual inner shortcodes for each accordion | |
$accordion_sections .= '[vc_tta_section title="' . $title . '" el_id="' . $accordion_section_id . '"][vc_column_text]' . $description . '[/vc_column_text][/vc_tta_section]'; | |
endwhile; | |
$accordion_end = '[/vc_tta_accordion]'; | |
// output via the shortcode with all the proper shortcode pieces | |
echo do_shortcode($accordion_start .''. $accordion_sections .''. $accordion_end); | |
} | |
// end output buffering, grab the buffer contents, and empty the buffer | |
return ob_get_clean(); | |
} | |
add_shortcode( 'fs_key_features_accordion', 'fs_sc_key_features_accordion' ); | |
/* ACF Case Study Key Features images, used within the Case Study page template */ | |
// [fs_key_features_images] | |
function fs_sc_key_features_images( $atts ){ | |
// begin output buffering | |
ob_start(); | |
if( have_rows('cs_key_website_features') ) { | |
// start section counter at 1, that we can then increase by one for each loop iteration, used for a unique ID per image | |
$repeater_counter = 1; | |
// images wrapper open | |
echo '<div class="casestudy-key-feature-images">'; | |
while ( have_rows('cs_key_website_features') ) : the_row(); | |
// vars | |
$image = get_sub_field('cs_key_feature_image'); | |
// create the number variable, of which we add 1 for each new iteration, that we can then use on the image ID | |
$image_counter_number = $repeater_counter++; | |
// the ID that we add to each iterataion, within image code below | |
$image_id = 'casestudy-key-feature-img-' . $image_counter_number; | |
// start image | |
if($image) { | |
$image_url = $image['url']; | |
$image_thumb = $image['sizes']['large']; | |
$image_alt = $image['alt']; | |
echo '<img width="640" height="640" src="' . $image_thumb . '" alt="' . $image_alt . '" id="' . $image_id . '">'; | |
} | |
else { | |
// otherwise if any of the repeater rows had no image, use a default one we set here | |
echo '<img width="640" height="640" src="/wp-content/uploads/fs-vector-homepage-layout.svg" alt="' . $image_alt . '" id="' . $image_id . '">'; | |
} | |
endwhile; | |
echo '</div>'; | |
// images wrapper close | |
} | |
// end output buffering, grab the buffer contents, and empty the buffer | |
return ob_get_clean(); | |
} | |
add_shortcode( 'fs_key_features_images', 'fs_sc_key_features_images' ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment