using meta box and oxygen together

When it comes to working with dynamic data, Oxygen is known for being one of the most flexible and powerful builders. It has long had support for Advanced Custom Fields and Toolset. Oxygen is now adding support for Meta Box in version 3.9 and the beta was just released. Meta Box is light weight and modular and has been a favorite of developers. The core Meta Box plugin provides the framework and then there are a large number of optional extensions that add features such as user interfaces for creating custom fields, Custom Post Types, post relationships, and more. One of the features of Meta Box is the ability to easily add a settings page to the WordPress admin. In this walk-through I’ll show how to add a settings page for business contact information and hours of operation, and how to display this information on the front-end using Oxygen.

Video Version

Test Site

testing site blank home page

I have a test site setup. Because Oxygen disables the theme, I went ahead and created some simple theme templates with Oxygen.

basic templates created

Here are the installed plugins. Oxygen 3.9 beta supports Meta Box. The core Meta Box plugin from the WordPress plugin directory is installed along with the All in One plugin. AIO is a convenience helper which makes the many Meta Box extensions easy to activate.

test site plugins installed

With the Meta Box AIO plugin activated we get this Meta Box admin menu. If you don’t see the Settings Pages menu option then go to the Extensions link and enabled it.

meta box admin menu

Creating the Settings Page

To start, I click on the Setting Pages menu and go to a page to define a settings page. Here I’ve given it a name, Site Settings. You can pick which menu item to want your new page to come after and the icon to show for it. The “Required capability” is the permission that the user needs to access the page. I left everything else at its default.

site settings page

After saving then we go to the Custom Fields menu item to start adding our fields. There are two tabs. The Settings tab of the Custom Fields page is where you specify where you want this group of custom fields to show. I pick the site settings page that we just created.

settings tab of edit field group page

On the Fields tab you add your custom fields. I add three fields. A phone number field for the site phone number, an email field for the contact email, and a text field for open hours. Most of the fields just go with the defaults, but on the open hours field I check that it should be cloneable.

open hours field

After saving, we are done with creating the settings page.

Displaying the Settings with Oxygen

The Site Settings page now shows in the menu. Going to the page we see our fields. Here I’ve added in the values.

site settings page with values

I created a page called Home, and on the Admin / Settings / Reading page I set that to be the home page. Now, I go to the Home page in the editor and click the Edit with Oxygen button.

Here I’ve created the page. I first added a Section and then inside that I added two columns. On the left I added am image for the image gallery. On the left I added some Headings and also some text field elements. As you can see, it is possible to access a button to see the dynamic data fields.

text field element with dynamic data

Here is a screenshot of the popup showing the dynamic data options.

showing the types of dynamic data available

Clicking on the Meta Box Field button shows the available Meta Box fields. Here are the ones we defined for the settings page.

ability to select the meta box fields

Here I’m adding the Open Hours field. Oxygen knows it is cloneable. There is an option to add a separator and I add a BR tag there so each of the text fields will show on its own line.

adding the open hours with a br separator

After adding the fields, I save and go look on the front-end.

site settings showing on front page


For convenience, I added the settings information to the home page, but you could easily add them to the header, footer, or a template part. Advanced Custom Fields also has the ability to create a settings page, but the Meta Box version is easier. I hope you can see how being able to add your own site-wide settings would be useful. By creating a settings page and accessing the data dynamically, you won’t need to directly edit templates or page content.

The Meta Box integration with Oxygen is working well. This is a much requested feature and users are looking forward to the final release. My conclusion after working with the beta is that the Meta Box integration with Oxygen is a winner.

Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission. You will still pay the same amount so there is no extra cost to you. I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255: “Guides Concerning the Use of Endorsements and Testimonials in Advertising.”

Similar Posts