Oxygen Builder version 3.9 officially integrated MetaBox into the pagebuilder. In this article, we are going to discuss how to use MetaBox custom fields and Oxygen Builder together.

MetaBox Video Tutorial

This article is made to supplement our video tutorial. The video will cover all aspects of using the new MetaBox integration with Oxygen. If you like our content, be sure to subscribe to the YouTube channel.

Why MetaBox?

Meta Box is one of the most powerful custom field plugins out there. WordPress deals with content as either Posts or Pages. If you need to assign a custom field to any other type of content, you use custom fields in WordPress. This allows for full flexibility in assigning different types of data to all types of content within WordPress.

Meta Box, alongside other custom field frameworks offers a powerful way to add these custom field types (like checkboxes, file uploads, text inputs, and more) to any type of content. In our opinion, it's the most powerful framework out there, while still being easy to use and maintaining flexibility. When compared to ACF, we have native bidirectional relationships, easier structure, built in custom post types, simpler settings pages, and custom database tables.

There is also ton of discussion about this plugin in our Facebook group - we invite you to join here! The developers of MetaBox.io are members of that group.

In the Oxygen Community, Meta Box has grown in popularity after offering a life time deal on AppSumo. They still offer a LTD through their website, and many Oxygen Users hold this, eagerly awaiting the promised Meta Box integration.

What Oxygen V3.9 Brings

And that promised Meta Box integration is exactly what Oxygen Builder v3.9 brings to the table.

The Oxygen team promised, and delivered. For those who use ACF with Oxygen, the integration is almost identical - you add dynamic data into fields, conditions and more as you normally would, but instead of selecting ACF, you choose Meta Box Field.

Essentially, the core integration is simply skinning the PHP in a pretty user interface, making it really easy to add fields. You can still add Meta Box elements with raw PHP in a code block, or by using the PHP function under dynamic data. You can also choose to use the Shortcode that Meta Box natively ships with, which will render elements such as tables and other items.

It's also worth noting, the team fixed the drag and drop issues that were plaguing the structure panel of the builder, and also made it load a lot quicker.

MetaBox and Oxygen Use Cases

Meta Box offers a great replacement to ACF, so anything you'd use that framework for can be applied with Meta Box and Oxygen Builder. Let's take a look at a few use cases for Meta Box custom fields, custom post types, and Oxygen Builder using the WordPress CMS:

1. Create a directory website - Add a custom post type for businesses using the built in Meta Box tool. You can add custom fields for addresses, hours of operation and more. No need for a Google Maps API, we can use Open Street for free (already working, no set up required). We'll use Oxygen to make a single directory listing template. We can use GridBuilderWP which works with Oxygen and MetaBox to make archive templates that are filterable.
2. Build an internal file directory for your company - You can create a standard membership website (we like MemberPress) with Oxygen and give access to employees. Set up Meta Box on the post type to accept additional data and file uploads. Then, use MetaBox or WSForms with their integration to accept fronted submissions. Only show posts and the submission form to registered members.
3. Add and display additional info to WooCommerce products - Simply add a new field group with Meta Box to the product post type. Use Oxygen to create a WooCommerce single product template and display the additional data on the front end.
4. Easily make a client-editable FAQs page - We love using Meta Box for this use case, making easily editable pages for clients in the backend. Make a group of two fields - Question (text) and answer (wysiwyg, so clients can format). Make the group clonable. Apply this group to the FAQ frontend page by using and Oxygen repeater or custom PHP in a code block.

Hopefully this should convey the power that using Meta Box with Oxygen 3.9 and up offers.

How To Use Meta Box and Oxygen

The integration is pretty easy to use, and mirrors the ACF one. In this section, we'll take a look at how to use the most standard MB custom fields with Oxygen. First, make a field group, and assign it to a post type. Once assigned to a post type, you'll have access to all of the dynamic data within Oxygen - on either a single post/page or a template for that custom content type. For global access to data, make a MB Settings page (this is great for company taglines, logos, colors, and more).

Once this is done, you can select fields within dynamic data. This can be done to insert specific content into your frontend design, and also apply conditions which can be set from backend field values. Here's an example of a custom field group we've created for a project we're working on. This is assigned to the product post type.

All of these fields are now available to be added to the single product template we've created in Oxygen.

Standard Text Field

Adding a standard text field from Meta Box is easy. Simply add a text element, highlight the placeholder, insert dynamic data, and choose your text field.

Images

Meta Box images are added by adding an image element, selecting data under image url, and choosing the image field within Meta Box.

Files

Files are typically added via link elements.

Cloneable Fields

These are similar to ACF repeaters, and can be used to create Oxygen Builder Repeaters and Easy Post elements.

Group Fields

Groups are essentially folders. They'll show under Meta Box fields. Click on them, and you'll be brought to a sub screen within the Meta Box dynamic data popup. There, you can choose the applicable field. Groups are helpful for organization.

Meta Box and Oxygen Conditions

Like ACF, you can use Meta Box values to show/hide elements of your website by using Oxygen conditions.

Add a condition, choose dynamic data, and select the MB field. We typically use a check box or radio element and select is_blank or is_not_blank. This will show/hide elements if the field is checked or not checked on the corresponding post backend.

Conclusion

This article was published using Oxygen 3.9 Alpha 1 for reference. Currently, there are many bugs making it not stable for production websites. The Beta and Final Release will fix this. For example, images do not work well and dynamic data from groups fields don't work. Keep in mind, the interface will not change, but the bugs will be fixed with time. This will be updated as future versions of 3.9+ are released.

Meta Box and Oxygen Builder make a formidable combo. You can create complex websites with unique data structures, and display all of this info on Oxygen - a tool that allows you to visually create any page layout without even needing to know code. With this native integration, this power becomes available to anybody - no need to know any PHP. And seeing that Meta Box is the only platform to offer a LTD in the custom fields space, it aligns perfectly with the Oxygen LTD model.

A match made in heaven.

If you have any suggestions, questions, or comments about Oxygen Builder v3.9 and up (specifically the Meta Box integration), feel free to leave your thoughts below.