How to Use an ACF Flexible Content Field in WordPress

WordPress is known for its flexibility. However, as the saying goes, with great power comes great responsibility. In a traditional build, you’re often responsible for stitching together templates while maintaining consistent layouts and preventing content editors from accidentally breaking the design.

The ACF Flexible Content field changes that and lets you create truly custom page layouts in WordPress without touching the design editor. You define reusable layouts, and your team can add, reorder, and remove them from a simple, block‑style editor.

In this article, we’ll explain what an ACF Flexible Content field is and how it works. We’ll show you how to use it to design your website with full control over structure and content, without adding extra complexity for your editors.

What is an ACF Flexible Content Field?

The ACF Flexible Content field is a feature included in Advanced Custom Fields (ACF) Pro that acts as a layout builder. It lets you create reusable “layouts” such as a hero banner, an image gallery, or a two-column text section by grouping together various subfields.

This creates a simple and intuitive experience for your content editors where they can add, reorder, and combine these pre-defined layouts to build dynamic pages, all without needing a page builder or touching a line of code.

This approach gives them creative freedom while ensuring the final design always remains consistent and on-brand, because you’ve already defined the structure of each block.

Where to Use ACF Flexible Content Fields

As the ACF Flexible Content Field is so adaptable, you can use it in many different situations. Here are some of the common use cases to give you a better idea of how it is applied in web development.

1. Building Custom Page Layouts

Your website might include a homepage, an About Us page, or a product features page. These pages are made up of different sections, like a hero banner, a grid of features, a testimonial slider, and a call-to-action.

The Flexible Content field is perfect for this. You can create a separate layout for each of those sections and style them once using your preferred page builder. Your content editors can then add the sections they need, arrange them in any order, and create a completely custom page.

2. Creating Marketing Landing Pages

Marketing teams often need to create unique landing pages for new campaigns, and they need to do it quickly. With a Flexible Content field, you can allow them to build these pages on their own.

They can use a library of ready-to-use layouts, like a lead capture form, an FAQ section, a pricing table, or a video embed to assemble a new landing page in minutes, all without needing a developer for every small change.

How to Use an ACF Flexible Content Field in WordPress

Now, let’s walk through a practical example. We’ll create a dynamic landing page using the Flexible Content field to manage different sections. While you can always display ACF data with custom PHP, we’re going to use an easy method to keep things simple.

For this guide, we’ll use the Breakdance website builder, which offers deep, native integration with ACF. Breakdance is an excellent choice as it includes a dedicated Flexible Content element. This lets you visually connect your ACF layouts to designs you create in the builder without writing a single line of code.

If you prefer a video format, this YouTube video covers the same.

To get started, let’s quickly cover what you’ll need.

Requirements

Before we start, make sure you have the right plugins installed and activated on your WordPress site.

You’ll only need two plugins for this walkthrough:

• Advanced Custom Fields Pro: The Flexible Content field is a premium feature, so you’ll need a license for the Pro version of the plugin.
• Breakdance: We will use the Breakdance page builder to create our templates and visually display the ACF data on the frontend.

Once you have both plugins ready, you can proceed to the first step.

Step 1: Create the Flexible Content Field

First, we need to set up the backend structure in ACF. This is where we’ll define the different content blocks, or layouts, that our content editors will use.

1. From your WordPress dashboard, navigate to ACF → Field Groups and click Add New.

2. Give your field group a descriptive name, like “Page Builder Sections.”
3. Under the Settings box, set the Location Rules to where this field group will appear. A common setup is to show it on a specific post type, like Post Type is equal to Page.

4. Now, click + Add Field to create your main container.

Next, we’ll configure this field to be a Flexible Content field.

• Field Label: Give it a clear name, such as “Page Content.”
• Field Type: From the dropdown menu, select Flexible Content under the Layout category.

Inside the Flexible Content field, you can now start adding your reusable layouts. For this example, let’s create two simple layouts: a Hero Banner and a Call to Action.

To create your Hero Banner layout:

1. In the Layouts section of your field, click + Add New Layout.

2. Give it a Layout Label like Hero Banner. ACF will automatically create the layout name (hero_banner).
3. Click + Add Field within this layout to add its sub-fields. Let’s add a Heading (Text field), a Background Image (Image field), a Tagline (Text field), and more.

Similarly, to create your Call-to-Action layout:

1. Click + Add New Layout again.
2. Set the Layout Label to Call to Action.
3. Add its sub-fields: a Headline (Text field), Button Text (Text field), and a Button URL (URL field).

Once you’re done, click Save Changes. You’ve now successfully created a Flexible Content field. If you edit any page, you’ll see your new block-based editor, ready for content.

Step 2: Design a Template for Each Layout

Now that we have our data structure in ACF, we need to create a visual design for each layout. In Breakdance, the best way to do this is by using Global Blocks. We will create a Global Block to act as a template for each of our ACF layouts.

Create the Hero Banner Template

1. From the WordPress dashboard, go to Breakdance → Global Blocks and click Add Global Block.

2. Name it something clear, like “Hero Banner Template,” and click Add Global Block.

3. Click Edit in Breakdance to launch the builder.
4. Inside the builder, design your hero section. You can add a Section element, set its background, and then add Heading, Text, and Button elements inside it.

Now, let’s connect this design to our ACF fields.

• For the Heading: Select the Heading element. In the properties panel, click the small database icon next to the text input. A dynamic data menu will appear. Scroll down to find your ACF field group and select the Heading field from your Hero Banner layout.

• For the Background Image: Select the Section element. In the Background settings, click the database icon next to Image and choose the Background Image field from your Hero Banner layout.

• Similarly, connect all the fields from your Header Banner layout.

Next, you can follow the same steps to create the Call to Action template and connect its fields.

After you save both Global Blocks, you have your visual components ready. The next and final step is to tell Breakdance to use these templates to display your content on the live page.

Step 3: Display the Content on the Frontend with Breakdance

With our ACF fields created and our design templates ready, the final step is to tell Breakdance how to render everything on a live page. We’ll do this by creating a main template for our pages.

Create a Template for Your Pages

1. From the WordPress dashboard, navigate to Breakdance → Templates and click Add Template.
2. Choose Add Custom Template and select Page (or whatever post type you assigned your field group to).

3. Click Add Template and then Edit in Breakdance to launch the builder.

Add and Configure the Flexible Content Element

This is where we connect our data to our designs.

1. In the Breakdance builder, click + Add to open the elements panel.
2. Search for and add the Flexible Content element to your page. This is a special element made specifically for this purpose.

3. Select the element. In the properties panel, you will see two primary settings:
   • Field: Click the dropdown and select the Flexible Content field you created earlier (Page Content).
   • Blocks: Here, you need to associate each ACF layout with its corresponding Global Block template. Click + Add Block for each layout.
     • For the Hero Banner layout, choose the Hero Banner Template Global Block.
     • For the Call to Action layout, choose the Call to Action Template Global Block.

Once you have mapped each layout to its template, click Save.

That’s it! Now, when you visit any WordPress page, Breakdance will automatically check for content in your Flexible Content field. It will loop through each layout a user has added and render it using the beautiful Global Block template you designed. This creates a seamless, dynamic system where your content editors can build pages, and the design always looks perfect.

Frequently Asked Questions – ACF Flexible Content Fields

1. What are the advantages of ACF?

The main advantage of ACF is control. It lets you add custom fields to any post, page, or custom post type. This simplifies content management for clients and creates a structured editing experience.

2. How to create ACF in WordPress?

To create an ACF field, go to ACF → Field Groups in your dashboard and click “Add New.” From there, you add your desired fields like Text or Image, and use the Location rules to assign the entire group to a specific post type, such as Pages or Posts.

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.

Related Information

• Advanced Custom Fields – Integrations Documentation
• Getting ACF Repeater Fields to Work Like Flexible Fields
• Flexible Content – Integrations Documentation