Flexible Content

Overview

The flexible content field acts as a blank canvas to which you can add an unlimited number of layouts with full control over the order. Each layout can contain 1 or more sub fields allowing you to create simple or complex flexible content layouts.

Demo

Settings

  • Layouts: Similar to the repeater field, this field contains sub fields. However, instead of 1 set of sub fields, the flexible content field allows you to create an infinite set of sub field groups (called layouts). With these layouts predefined, you can then add them into your field when ever you want and where ever you want.
  • Button Label: Create custom text to appear in the “Add Row” button.
  • Minimum Layouts: Set a limit on how many layouts are required
  • Maximum Layouts: Set a limit on how many layouts are allowed

Template usage

The flexible content field is essential a wrapper for a group of layouts, so to loop through the layouts and target the sub field values, you must make use of a few extra functions. These are described below:

Basic Loop

This example shows how to loop through and display data with the have_rows, the_row and the_sub_field functions.

<?php

// check if the flexible content field has rows of data
if( have_rows('flexible_content_field_name') ):

     // loop through the rows of data
    while ( have_rows('flexible_content_field_name') ) : the_row();

        if( get_row_layout() == 'paragraph' ):

        	the_sub_field('text');

        elseif( get_row_layout() == 'download' ): 

        	$file = get_sub_field('file');

        endif;

    endwhile;

else :

    // no layouts found

endif;

?>

Nested Loop

This example shows how you can loop through a nested repeater field (‘images’). This data setup can be seen in the screenshots above.

<?php

// check if the flexible content field has rows of data
if( have_rows('flexible_content_field_name') ):

 	// loop through the rows of data
    while ( have_rows('flexible_content_field_name') ) : the_row();

		// check current row layout
        if( get_row_layout() == 'gallery' ):

        	// check if the nested repeater field has rows of data
        	if( have_rows('images') ):

			 	echo '<ul>';

			 	// loop through the rows of data
			    while ( have_rows('images') ) : the_row();

					$image = get_sub_field('image');

					echo '<li><img src="' . $image['url'] . '" alt="' . $image['alt'] . '" /></li>';

				endwhile;

				echo '</ul>';

			endif;

        endif;

    endwhile;

else :

    // no layouts found

endif;

?>

Basic Loop (before version 4.3.0)

The functions have_rows and the_row were added in v4.3.0. Prior to this, a function called has_sub_field was available (and still is) to loop through the rows of data. There is 1 key difference to this function and that is you cannot use it within an if statement.

<?php

// check if the flexible content field has rows of data
if( get_field('flexible_content_field_name') ):

 	// loop through the rows of data
    while ( has_sub_field('flexible_content_field_name') ) :

		 if( get_row_layout() == 'paragraph' ):

        	the_sub_field('text');

        elseif( get_row_layout() == 'download' ): 

        	$file = get_sub_field('file');

        endif;

    endwhile;

else :

    // no layouts found

endif;

?>