Using Advanced Custom Fields (ACF) Flexible Layout with Oxygen Builder

One of the big challenges when working with Oxygen Builder sites is client-friendly content editing. Most clients will be used to the WordPress content editor, or a similar CMS, and you’ll want to avoid forcing the client into the actual builder, where they’ll be overwhelmed with options.


At the same time, you want to offer clients as much content editing freedom as possible, while keeping control of your design and HTML output.


The solution for this dillemma is Advanced Custom Fields Flexible Content.

The Flexible Content field provides a simple, structured, block-based editor.

Using layouts and sub fields to design the available blocks, this field type acts as a blank canvas to which you can define, create and manage content with total control.

Step 1

Tip: Set up a Private page where you create the different layouts in Oxygen

In order to make the creation of the different layouts as simple as possible, set up a private page where you edit the layouts in Oxygen.

Don’t worry about dynamic data just yet, just make the design look great, and make the different parts look great together 🙂


Step 2

Create sections (or DIVs) for each layout you need

In this example, I’m setting up a simple heading + text, in a nice centered column.

IMPORTANT: Make sure you put all your styling in classes!!! 

It’s very important to remember this when using this approach, because any styling on ID’s won’t carry over when we pull in the reusable parts with the do_shortcode method later on.


Step 3

Turn the section you created into a reusable part

Like this:


Give it a recognizable name, like ‘FLEX: Heading with content‘.

Step 4

In an ACF Flexible Content block, set up the fields for the layout

In ACF, I’ve created a new Field Group called ‘Sections Editor‘. The Field Group shows on Pages and Posts.

In it, there’s a single Flexible Content field called ‘Add or edit Pages Sections‘, with the field name ‘section_content‘. Remember this field name, because we’ll be using this later in PHP.

In the Flexible Content block, I set up the fields for the dynamic data for the sections we created earlier.

In this case, it’s just a Text field and a WYSIWYG editor:

Step 5

Edit the reusable part

In Oxygen, edit the Reusable Part we just created, and can now be found under Oxygen > Templates:

We’re now going to prepare the Reusable Part for Dynamic Data from ACF.


Edit the element where you want to insert data, for example: the Heading, and click ‘Insert Data’:


Now, we need to use Advanced > PHP Function Return value:


The PHP function we need to use, is ACF’s get_sub_field, and the argument will be the corresponding ACF field name we set up in the Flexible Content Layout. In this case, it is heading_with_content_field_heading – see above.


In the Oxygen editor, the field will now show ‘NO DATA FOR FIELD’, but don’t worry about this, we’ll get to that in a second 🙂


Step 6: the magic

Set up a code block that will render the flexible content

In the Page, Post, or Template where you want to render the Flexible Content, add a Code Block.

Under PHP, add this code:


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

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

        if (get_row_layout() == 'heading_with_content_field') : 
            echo do_shortcode( get_post_meta( '136', 'ct_builder_shortcodes', true ) );

        elseif (get_row_layout() == 'youtube_video_player') : 
            echo do_shortcode( get_post_meta( '152', 'ct_builder_shortcodes', true ) );


    // End loop.

// No value.




So it looks like this in the editor:


Let’s walk through this code:

if (have_rows('section_content')) :

The Flexible Content block we created in Step 4 has a field name of ‘section_content’. This line checks if the Flexible Content block is there, and if it has any rows.

if (get_row_layout() == 'heading_with_content_field') :

Checks if the current row is our heading_with_content_field.

echo do_shortcode( get_post_meta( '136', 'ct_builder_shortcodes', true ) );

Now this is the real magic, and I couldn’t have figured this one out without the help of Sridhar Katakam’s blog post on This line of code renders the content of a Reusable part with ID 136, which is the part we created earlier on!



UPDATE FOR OXYGEN 4.0 and later:

Since Oxygen 4.0 is no longer shortcode-based, instead of using

echo do_shortcode( get_post_meta( 'my_ID', 'ct_builder_shortcodes', true ) );

we can now use

echo do_oxygen_elements( json_decode( get_post_meta( my_ID, 'ct_builder_json', true ), true ) );

to achieve the same effect. Thanks for the tip, Gaël Verhelst 🙂


In order to find the ID of a Reusable part, navigate to Oxygen > Templates, and click Edit on the part you need:

Now, your browser address bar will show the part ID after ?post=:



Step 7

The client interface

When editing a Page, Post, or any type of content where you’re showing the ‘Section Editor’ Field Group, the client can add sections, and is presented with a nice menu with available layout options when adding a new one:

Made by Rocketclowns

For Koole Terminals in Rotterdam, I created an interactive animation that is embedded in the homepage of their new website. The animation tells the story of the entire Koole Terminals operations in a way that invites discovery.

Engagement through animation

Koole Terminals interactive animation

I was invited to create a work for a mixed-media art exhibition around the hard-to-translate Dutch concept of ‘verstilling’.

Algorithmic audiovisual brain holiday

HUSH Recouture

electric co

A campaign website where the KSU can easily post new vacancies, and visitors can apply for teaching positions directly on the site.

Recruitment campaign for primary school teachers

Rocketclowns News

Touched is a forward thinking record label curated by Martin Boulton (aka Min-Y-Llan) and is is a non-profit label with a cause.

Touched Electronix TE004 – Out now

Our Mobile Podcast Studio page has reached the top spot on Google for the search term ‘mobile podcast studio. Awesome! But how?

SEO: top ranking for our ‘Mobile Podcast Studio’ page

After a refreshing holiday on the beaches of schiermonnikoog|And Agia Pelagia in Crete, Greece|Rocketclowns are GO!

Post holiday reboot!

Our interactive web animation / sound design project ‘Roberto’s Garden‘ is an interactive web experience with quite a backstory.

Roberto’s Garden featured on

Contact us

Developed by Rocketclowns

Lead developer
Olaf Wempe