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.

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 🙂

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.

Like this:

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

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:

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 🙂

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

Under PHP, add this code:

<?php

// 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 ) );

        endif;

    // End loop.
    endwhile;

// No value.

endif;

?>

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 wpdevdesign.com. 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=:

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: