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

We Are Muze has a fluid construction allowing it to work with several designers and artists in photography, film, dance, graphic design and other fields.

Creating amazement through innovative dutch fashion design


In 2008, Rocketclowns created Ruben L. Oppenheimer’s official site, in Flash. For the time, it used some rather novel techniques, such as user controlled parallax, a 2.5D environment, and ambient sound design. The new version is a future-proof complete overhaul to HTML5, that would also reach mobile devices, and would be easier to keep up to date.

Cartoons brought to life

Ruben L. Oppenheimer

Nilssi’s unique mixture of jungle, reggaeton, grime and dancehall, and bold, no nonsense production style created a nice challenge for 0L4F’s mastering skills: to maximize the impact of the sparse, but genius arrangements, where actually everything cuts through the mix.

A hard-hitting voyage through the mind of Nilssi

Nilssi – High Born Voyage EP mastering Recouture

electric co

Rocketclowns News

Embedding HTML5 Canvas into WordPress

Since the beginning of this year, we’ve been tuning and refining our WordPress development workflow

Fresh website development tech

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

Our mobile podcast recording studio fits neatly in a backpack, and can be up and running in minutes. Our experienced sound engineers will ensure top quality recording and post processing.

Rocketclowns Mobile Podcast Studio

Contact us

Developed by Rocketclowns

Lead developer
Olaf Wempe