The challenge: could I build a module with nested flexible content fields in Advanced Custom Fields for a versatile image module?

There is no innovation and creativity without failure. Period.

~Brene Brown

Luckily, nesting flexible content took little failure, because it was a bit easier than I expected. With this guide, I hope it will be for you too.

Building the Backend

• In your flexible content field group, add a layout that is a flexible content type as well

• I labeled the layout as a row since multiple rows can be added to this image module element
• In this row, continue to build out flexible content layouts as you normally would for the parent

The Code

• Create the layout file and add to your parent flexible content file as you would for any other layout file

• Now you can move forward one of two ways

1. Simply code the layouts in your child layout file

2. Create a child flexible content file that would include files for each of your nested flexible content rows

If your child flexible content layouts are going to be more complicated, I definitely recommend going with #2 to simplify your code.

The Final Result

With the power of Advanced Custom Fields’ flexible content, you now have a module to empower you and fulfill all your content needs.

Bonus Tips: 

• Add portions of the nested flexible content a bit at a time and check on the post/page side as you go.  Nested Flexible content can get overwhelming very quickly with adding layouts and content fields.  Make sure that you edit the layouts and button labels so the rows make sense to the user. (Ex. keeping your child layouts’ layouts as “Block” will help clean up your CMS. )