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.

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($27/month).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: