Client-friendly content editing for Oxygen

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:

Step 8

Done :)

Made by Rocketclowns

'Unique sound and interpretation'

Agnes Gosling

A hard-hitting voyage through the mind of Nilssi

Nilssi - High Born Voyage EP mastering

Music & video by Olaf Wempe

0L4F - The First Time I Saw Your Moment

Everything should be XX

MEXX Youth campaign

See more work by rocketclowns

Rocketclowns NEWS

Upping the game

Fresh website development tech

Totally fresh

Post holiday reboot!

Javascript with ears

Javascript music visualizer

No SEO wizardry, just useful content

SEO: top ranking for our 'Mobile Podcast Studio' page

more news