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:

<?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 🙂

 

UPDATE FOR OXYGEN 4.8.3 and later:

Oxygen 4.8.3 changed the post_meta keys for security reasons from ct_builder_* to _ct_builder_* (prefixed with underscore.
You need to either prefix the meta key, or replace get_post_meta() with oxy_get_post_meta(), which automatically prefixes the post meta keys where needed.

So, the code becomes

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

 

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

Donemus (compounded from Documentatiecentrum nederlandse muziek) is the Dutch institute dealing with the documentation of Contemporary music composed in the Netherlands.

Publishing house of contemporary classical music

Donemus

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

Couture Multiples

Atelier Maria Lux

Music & video by Olaf Wempe

0L4F – The First Time I Saw Your Moment

Rocketclowns News

Rocketclowns’ sound design division branches out and gets it’s own websiteand branding

New website for Rocketclowns sound design: olafwempe.com

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

Every now and then, when we really like the outcome of one of our experiments with interactive HTML5 animation, we splash it right on the front page of our site.

Splash page archive: Januari 2016

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