Published on Aug 4, 2021

ACF Flexible Content in Oxygen

Sridhar Katakam

This members-only tutorial provides the steps to set up a Flexible Content field using Advanced Custom Fields Pro having multiple layouts enabling the site owners to drag and drop the rows in their desired order in Oxygen.

We shall register a field group having the following layouts (with sub fields for each listed):

  1. Heading 2
    - Text
  2. Heading 3
    - Text
    - Color
  3. Text Full Width
    - Wysiwyg Editor
  4. Image Full Width
    - Image
  5. Image Left Half
    - Image
    - Wysiwyg Editor
  6. Image Right Half
    - Wysiwyg Editor
    - Image
  7. Text 2 Columns
    - Wysiwyg Editor (for left text)
    - Wysiwyg Editor (for right text)
    - Color Picker (for background color)

Field Group:

The group has been set to appear on all posts

A post in the backend with the fields populated:

Frontend:

Note: There are infinite number of ways in which Flexible Content field can be configured with different combinations of rows and sub fields. This tutorial is to be treated as a general guide. You are encouraged to go through the code and understand how it's put together so you can output any type of Flexible Content in your sites.

Step 1

Install and activate ACF Pro.

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $499 one-time).

Already a member? Log in below or here.

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-downarrow-right