WordPress websites are built using a wide variety of content layouts. Most themes offer a set of predefined templates, while page builders give you drag-and-drop interfaces to help arrange this content.
If you are working for a client or in a team, you might want to offer them a simple, structured way to build pages without all the complexities. You might want to offer consistent, rearrangeable sections that editors can manage without breaking the design. That’s where Flexible Content helps. It allows developers to define the structure, and editors to assemble pages.
In this article, we’ll take a detailed look at the ACF Flexible Content field. We’ll see how it works and what it has to offer.
Table of Contents
- Why ACF Flexible Content Is a Game-Changer
- Flexible Content vs The Repeater Field
- Using ACF Flexible Content in WordPress
Why ACF Flexible Content Is a Game-Changer for Developers
As a developer, your goal is to build websites that are both flexible for the client and durable enough to withstand content updates. The challenge is giving editors the freedom they need without letting them break the design or structure you carefully built.
The Flexible Content field directly addresses this problem by letting you create a library of predefined content layouts. Each layout contains only the specific fields you define, which gives you complete control over the data inputs available for that component.
This approach improves the development workflow in several key ways:
- It provides structured data. Instead of adding content to a one large editor, you get clean, predictable data from each field.
- It simplifies the client experience. Editors are presented with a simple, block-based interface, which reduces training time and prevents user error.
- It speeds up development. Layouts are reusable. Once you build a component like a testimonial block, it can be used on any page, saving significant time.
- It improves maintainability. By separating content from presentation, you make future updates and design changes far more efficient.
Flexible Content vs The Repeater Field: A Quick Comparison
Both the Flexible Content and Repeater fields allow you to create repeatable blocks of content. However, they are designed for different purposes and offer different levels of control over the layout structure.
The Repeater Field
The Repeater field is best for creating lists of similar items. It uses a fixed and consistent structure where every row contains the exact same set of sub-fields.
For example, you might use a Repeater to create a list of team members, where each entry requires a Headshot, Name, and Title. Every row is identical in its structure.
The Flexible Content Field
In contrast, the Flexible Content field is used for building varied and complex page layouts. It doesn’t have a fixed structure. Instead, you define multiple "layouts," and each one can have its own unique set of sub-fields.
An editor can then add and arrange these different layouts in any order. For example, you can create a page with a Hero section, followed by a Two-Column Text layout, and end with an Image Gallery layout.
Using ACF Flexible Content in WordPress: A Step-by-Step Guide
Now that you know what it means, let's walk you through how to use it in WordPress. We'll show you how to create a Flexible Content field, define layouts for it, and display the content on the frontend of your website. While this can be done with custom PHP, we will use a builder to simplify the display process.
1. Defining Your Layouts in the Field Group
The first step is to create the field group that will contain your Flexible Content field. This is where you will define the structure of your content blocks.
- In your WordPress dashboard, navigate to ACF → Field Groups, click Add New, and give your field group a title.
- Under the Settings box, choose the Post Type where this field group will show up.
- Next, click + Add Field. For the Field Type, select Flexible Content and give this field a label.
Inside this field's settings, you can now define your layouts.
To create your first layout, click + Add New Layout and give it a label. Within this layout, you can click + Add Field to add all your necessary sub-fields.
Here’s how it looks with all the sub-fields added.
You can follow the same steps to create all the different layouts you want to add.
After defining all the layouts, click Save Changes. The backend structure is now complete, and the field will appear on the edit screen of the post type you selected.
2. Connecting Layouts to a Frontend Design
After defining your fields and layouts in the ACF backend, you need to render that data on the frontend. There are two methods for this: using a visual builder or adding custom PHP code.
Let’s look at both methods:
Option A: The Builder Method (Using Breakdance)
Breakdance integrates with ACF and provides a visual, no-code way to design your layouts. It includes a dedicated Flexible Content Field element that makes the process simpler.
This method is faster and more accessible if you prefer to avoid editing theme files directly.
For each ACF Flexible Content Field layout, you need to create a corresponding Global Block in Breakdance. This allows you to design the block visually and use the dynamic data feature to connect elements to the ACF sub-fields for that layout.
Once the global blocks are ready, we need to create a template to render these on the frontend.
In Breakdance, create or open the template where you want to display these layouts and add the Flexible Content element.
Once the element is added, you need to configure the following settings:
- Field: In the element's settings, select your Flexible Content field.
- Blocks: In this section, you will map your ACF layouts to your Breakdance Global Blocks. Click + Add Block and for your hero_banner layout, select the "Hero Banner" Global Block you created. Repeat this for all other layouts.
When a page is viewed on the frontend, the Breakdance element automatically loops through the content and renders the correct Global Block for each layout, passing the right data to it. This avoids the duplicated content issue because the element manages the loop state internally.
Option B: The Traditional PHP Method
This method involves editing your theme’s template files, like page.php, to loop through the Flexible Content layouts and include a corresponding template part for each one.
The process relies on a have_rows() loop to iterate through each layout a user has added. Inside this loop, you use get_row_layout() to identify which layout you are on, and then functions like get_sub_field() to retrieve the data for that specific row. This ensures that even if a layout is used multiple times on a page, each instance will display its own unique content.
The official ACF website provides detailed documentation and complete code examples for implementing this loop. For the full code, please see the Flexible Content loop example on their resource page.
Frequently Asked Questions - ACF Flexible Content Fields
1. How do I add custom fields to a custom post type?
To add a field group to a custom post type, go to the Settings box for that field group. Under Location Rules, set the condition to Post Type is equal to and select your custom post type from the dropdown list. The fields will then appear on its edit screen.
2. How do I show custom fields in the WordPress post list?
To display a custom field's value in the admin post list, you can use the Admin Columns for ACF Fields plugin. It adds an "Admin Column" toggle under the "General" tab for each field. ACF will then automatically add a new column to the corresponding post list showing that field's data.
3. How do I create a post type in ACF?
While ACF's primary feature is adding fields, ACF Pro (6.1+) allows you to create your own custom post types. You can do this directly from the ACF → Post Types menu, which gives you a simple interface to create new content types like Services or Projects.
4. Where does ACF store data?
ACF stores its data in the standard WordPress meta tables. For fields on a page, the data is saved in the wp_postmeta table. Likewise, fields attached to users or categories are stored in wp_usermeta and wp_termmeta, respectively. This helps keep it organized within the WordPress database.
5. How do I add a repeater field in ACF?
The Repeater field is an ACF Pro feature. To add one, create a new field in your field group and select Repeater as the Field Type. Within the Repeater field's settings, you can then add and configure the set of sub-fields that you want to be repeated for each row.
