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
I have a test site setup. Because Oxygen disables the theme, I went ahead and created some simple theme templates with Oxygen.
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.
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.
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.
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.
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.
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.
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.
Here is a screenshot of the popup showing the dynamic data options.
Clicking on the Meta Box Field button shows the available Meta Box fields. Here are the ones we defined for the settings page.
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.
After adding the fields, I save and go look on the front-end.
Conclusions
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.
