07Aug

ACF flexible content inside flexible content

I am building a page builder for a bespoke wordpress theme using Advanced Custom Field (pro). I use it in every theme I build. It has the “flexible content”. You can push it further adding a flexible content into an other one. 

Have a flexible content field into and other flexible content with ACF

Using “have_rows” you can list flexible content inside flexible content, and you can have repeater inside them, groups, etc.

>>> For a better readable version of the below (wp editor below fck the indentation), read it on gist.github

Here is a short extract of my code where you can see the logic:

<?php if (have_rows('sections')) { while (have_rows('sections')) { the_row(); if (get_row_layout() == "text_section") { $background_colour = get_sub_field('background_colour'); if( have_rows('text_element') ) { ?>

<section class="<?php echo $background_colour; ?>">
<div class="container">

<article class="mod-text mod-padding mod-maxw">
<?php while ( have_rows('text_element') ) { the_row(); $background_colour = get_sub_field('background_colour'); if(get_row_layout() == "wysiwyg_editor") { echo get_sub_field('editor'); } elseif(get_row_layout() == "cta") { ?>

<div class="cta">
<a href="<?php echo get_sub_field('cta_url'); ?>"><?php echo get_sub_field('cta_label'); ?></a>
</div>

<?php } elseif(get_row_layout() == "accordion_single") { ?>

<ul class="mod-accordion">
<?php while ( have_rows('accordion_content') ) { the_row(); ?>

<li>                        
<div class="mod-accordion--toggle">
<strong><?php echo get_sub_field('accordion_title'); ?></strong>
<span class="icon">+</span>
</div>
<div class="mod-accordion--content">
<?php echo get_sub_field('accordion_copy'); ?>
</div>
</li>

<?php } ?>
</ul>

<?php } } ?>
</article>
</div>
</section>

<?php } if (get_row_layout() == "video") { ?>

<article>
<div class="mod-video">
<a href="<?php echo get_sub_field('video_url'); ?>" class="samewindow mod-video-popup">
<img alt="video poster" src="<?php echo get_sub_field('video_poster_image'); ?>">  
<span class="play-icon"></span>
</a>
</div>
</article>

<?php } } } } ?>

 

Hope this helps if you need to do the same.

Leave a Reply