How to display ACF Repeater Data from Options page in Oxygen

This members-only tutorial provides the steps to enable the Advanced Custom Fields Pro's Options page, add a couple of standard fields and a Repeater-type field having three sub fields to this options page and output them on a static Page by using a custom PHP loop using Oxygen's Code Block:

• Project Intro - Wysiwyg Editor
• Main Image - Image
• Project Details - Repeater
  * Project Name - Text
  * Project Description - Wysiwyg Editor
  * Project Photo - Image

ACF Field Group

Fields populated on the ACF Options page

Oxygen editor

On the front end

Step 1

Install and activate ACF Pro and Code Snippets.

Step 2

Let's add an Options page.

Add a new Snippet.

Title: ACF Options Page

Code:

if ( function_exists( 'acf_add_options_page' ) ) {

    acf_add_options_page();

}

Step 3

Go to Custom Fields > Tools and import this field group.

Ensure that the field group is set to appear on the Options Page, Options.

The reason for setting Project Photo field's return format as Image Array vs the simpler Image URL is because this allows us to specify the exact size of the image in the code so we don't have to worry about clients uploading huge images.

Step 4

Click on Options admin menu item and populate the fields.

Project Details is a Repeater type field and so you (or the client) can add as many rows as needed.

Step 5

Edit the Page/Template in which you wish to pull the fields and show them with Oxygen editor.

Add a Section and inside that a 50 / 50 Columns component.