How do I Nest Flexible Content Inside Flexible Content?

September 25, 2017

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

screenshot of flexible content layout being created into flexible content

  • 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

Nested flexible content field included in parent flexible content file

  • Now you can move forward one of two ways

1. Simply code the layouts in your child layout file

      1. Flexible content in child flexible content file

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

      1. Example of child flexible content template

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.

adding a row for your child flexible content field


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. )

Stay in Touch!

Subscribe to our newsletter.

Solutions Architecture

browse through our blog articles

Blog Archive