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.
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.
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.
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.
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:
Hopefully this should convey the power that using Meta Box with Oxygen 3.9 and up offers.
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.
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.
Meta Box images are added by adding an image element, selecting data under image url, and choosing the image field within Meta Box.
Files are typically added via link elements.
These are similar to ACF repeaters, and can be used to create Oxygen Builder Repeaters and Easy Post elements.
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.
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.
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.