Settings Page in Oxygen using Meta Box

This members-only tutorial for intermediate to advanced users provides the steps to register a settings page in WordPress + Oxygen site using Meta Box, attach a custom fields group and display the field values conditionally.

Step 1 - Register a Settings page

Install and activate Meta Box.

Next, install and activate either MB Settings Page + Meta Box Builder or Meta Box AIO.

Go to Meta Box > Settings Pages and click New Settings Page.

Give it a title of say, "Options". This is only for organizational purpose and won't be used in the code.

Option name: my_options

Select the gear (cog) icon.

Settings Page ID: my-options

Step 2 - Register a field group

Let's create a field group for our settings page.

Go to Meta Box > Custom Fields and click Add New.

Give a title of say, "Sitewide".

Add your desired fields. In this example, we are going to add

1. logo - "Single Image" type of field
2. notice - "WYSIWYG Editor" type of field
3. button_background_color - "Color Picker" type of field

Set the field group to appear on the setting page created in the first step.

Note the sitewide_ string we have set as the Field ID prefix.

This means we can keep the ID of our fields simple like logo instead of sitewide_logo when adding the fields. In a later step when it is time to refer to the field, we need to use sitewide_logo even if the field ID appears as logo in the interface.

Step 3 - Populate the field group

Click Options in the WP admin left menu and populate the fields.

Step 4 - Define functions to retrieve field values

Let us define a custom function to get the URL of logo image from the settings page so we can set this as Oxygen Image component's URL via dynamic data.

Install and activate Code Snippets plugin.

Go to Snippets > Add New.

Title: [Meta Box] Functions for getting Settings page field values

Code: