Displaying Custom Fields Easier with Auto-Generated Code in Meta Box Builder

Meta Box users have been using page builders, MB Views, or PHP code to display custom fields' values on the front end. While using page builders and MB Views give you a user-friendly interface to get the custom fields' values, using PHP code is more flexible, powerful, and convenient if you're building a plugin or a theme from scratch.

However, a problem with PHP code is developers usually need to refer to the documentation to understand how fields save data and how to get it with helper functions. It's quite time-consuming while the purpose of Meta Box is to save developers time creating and managing custom fields.

Introducing Theme Code

To avoid it, in the latest version of Meta Box Builder, we added a new feature called Theme Code, which automatically generates PHP code to display fields' values that you can copy and paste into your plugins or themes.

Let's take a look at this video with a real case or see the below screenshot of a field group for an event post type to understand this feature.

What the plugin does is creating another box called Theme Code below the list of custom fields for the event post type. In this box, all the defined custom fields are listed. When you select a field on the left, the auto-generated code to display its value appears on the right. And you can select the code and copy it. We also add a Copy button that helps you copy the code faster.

Multiple Variations of Code

To make it easier for developers, we try to generate the code in various ways, like for a text field, we'll show how to display the value and also how to get the value (see the screenshot above). For a select field, we'll show how to display values and also labels, or both.

For complex fields like Open Street Map or post, the generated code is quite flexible:

You can decide which code is best for you to copy. Most of the codes are similar to what you see in the documentation, so you'll see them familiar.

Because the code is automatically generated, don't blindly copy and paste the code. What the plugin automatically generates is a hint, and you should use it as a starting point and modify it to fit your needs.

Support

The auto-generated code works well with all field types in Meta Box. It also supports displaying custom fields for:

• posts
• terms
• users
• settings pages

It also works well with groups, in this case, it will generate code to display sub-fields in a group:

Start Using Theme Code

To use Theme Code, please update Meta Box Builder (or Meta Box AIO/MB Core if you use a bundle) to the latest version. After updating, just save the field group to see the auto-generated code below the list of fields.

We hope this feature will save you a lot of time coding with Meta Box. While it's mostly code and suitable for developers, it is also helpful if you want to use code in some page builders that have a code widget like Oxygen.

This is the first version of the Theme Code, so we'd love to hear your feedback about it. We're open to any idea that makes the tool better. And if you find this tool useful, please share it with your audience.