ACF Flexible Content Field Type: Complete Guide

The ACF Flexible Content Field is a handy feature for organizing your content in a structured way on WordPress posts and pages. Think of it like a versatile content builder that allows you to add various layouts and sub-fields to make your content visually appealing. It’s similar to a repeater field but with the added flexibility of having multiple layouts within each row.

Imagine you’re creating a page where you want to showcase different types of content sections. With the ACF Flexible Content Field, you can easily define these sections. For example, you might have a “Hero” layout for the top of your page, a “Text and Image” layout for the middle, and a “Gallery” layout for the bottom.

Each layout can have its own set of customizable sub-fields. For the “Hero” layout, you could have fields for a large headline, a background image, and a call-to-action button. The “Text and Image” layout might include fields for text content and an image upload. The “Gallery” layout could have a field for adding multiple images.

The benefit of the flexible content field lies in its simplicity and clean interface. It provides an easy way to structure your content without needing extensive coding knowledge. Plus, it allows for unlimited possibilities, as you can add as many layouts and sub-fields as you need.

How To Create ACF Flexible Content Field?  

The steps below will guide you towards creating Flexible Content field layouts for your WordPress site.

Checkout: How To Display Data Form ACF Flexible Content In Elementor?

Step 1: Create a Flexible Content Field

Start with creating a field group if not created yet, and then add a new field and set its type to Flexible Content.

Step 2: Create Layouts under the ACF Flexible Content Field

Under the ACF flexible content field type, you can add any number of layouts, each with its own set of fields.

For example, as you can see in the above screenshot, the flexible content field (Flex Content) contains two layouts (Hero & Section), each containing its own subfields.

Step 3: Location Settings  

Lastly, specify the location where you want to apply the flexible content field; if you have already assigned a location, you can skip this process.

Template usage   

The ACF Flexible Content field returns a multi-dimensional array containing the layouts and their sub-field values.

Accessing the value is done via the have_rows, the_row, get_sub_field, and the_sub_field functions.

Loop example   

This example demonstrates how to loop over an ACF Flexible Content field value and access subfields from different layouts.

<?php

// Check value exists.
if( have_rows('content') ):

    // Loop through rows.
    while ( have_rows('content') ) : the_row();

        // Case: Paragraph layout.
        if( get_row_layout() == 'paragraph' ):
            $text = get_sub_field('text');
            // Do something...

        // Case: Download layout.
        elseif( get_row_layout() == 'download' ): 
            $file = get_sub_field('file');
            // Do something...

        endif;

    // End loop.
    endwhile;

// No value.
else :
    // Do something...
endif;

Display layouts   

This example demonstrates how to loop through a Flexible Content field and generate HTML for different layouts.

<?php if( have_rows('content') ): ?>
    <?php while( have_rows('content') ): the_row(); ?>
        <?php if( get_row_layout() == 'paragraph' ): ?>
            <?php the_sub_field('paragraph'); ?>
        <?php elseif( get_row_layout() == 'image' ): 
            $image = get_sub_field('image');
            ?>
            <figure>
                <?php echo wp_get_attachment_image( $image['ID'], 'full' ); ?>
                <figcaption><?php echo $image['caption']; ?></figcaption>
            </figure>
        <?php endif; ?>
    <?php endwhile; ?>
<?php endif; ?>

Conclusion

In conclusion, ACF Flexible Content Field is like a helpful feature for making your WordPress pages look great. It lets you easily organize different content sections. Each section can be customized with its own details, making it simple to create and design your pages exactly the way you want. It’s a user-friendly feature that adds a touch of creativity and structure to your content without needing advanced technical skills.