WPLake > Blog > 3 Ways to Display Meta Box Fields

3 Ways to Display Meta Box Fields

Time to read: 3 mins

-

Meta Box Plugins Tips and Tricks

-

Updated 19.03.24

Overview of the top three methods to display MetaBox fields, with pros and cons.

Table of Contents

The Meta Box plugin stands out as one of the best meta field plugins available on the market. Its wide range of field types and extensive settings make it an attractive tool for developers. Let's consider three ways in which we can display the values of Meta Box fields on the front end.

1. Display using raw PHP code

#link copied

This method, while flexible, is also time-consuming and involves manual markup creation. It requires referring to the specific field documentation to understand the return format of each field type.

There are two primary functions to retrieve and display field values:

These functions are used uniformly regardless of the field type, but the output varies depending on the field type.

For instance, for an Image field, the output is an array containing image information, while for a User field, it's a user ID, necessitating the use of built-in WordPress functions to retrieve the user's data.

Tip: Meta Box offers the Builder addon as a replacement for the free Online Configurator. At the bottom of the field group, you can find pre-generated PHP code examples to display fields defined in the current group.

Theme code widget of the MetaBox builder addon
Theme code widget of the Builder addon

2. Using Advanced Views Lite

#link copied

The Advanced Views Lite plugin offers smart templates for displaying content, featuring built-in post queries and automated template generation. It's a free plugin that seamlessly integrates with a variety of meta field plugins, including Meta Box.

As per the plugin's documentation, it is a versatile and flexible tool that can be utilized independently or in combination with your preferred framework or builder.

The usage of the Advanced Views plugin is straightforward. To display our Meta Box fields on the front end, we create a new View and select the target fields from the drop-down menu, then save the settings.

View look of the Advanced Views plugin
View is a smart template responsible for displaying content which includes a Twig template.

Advanced Views Lite automatically generates a Twig template to display the fields, which we can customize according to our needs, including adding CSS and JS code.

Next, we copy the shortcode related to the View we created and paste it in the desired location. That's all there is to it! Visitors can now view the fields displayed in the designated location.

By the way, you don't need to worry about field formats and data conversions anymore. The plugin handles everything dynamically, including Twig rendering and data conversions, by retrieving field values and requesting necessary details from WordPress on the fly.

Pro tip: Advanced Views Lite offers the File system storage option, which stores all data of our Views within our theme. This allows us to edit Twig templates, CSS, and JS directly in our favorite IDE and utilize GIT for versioning.

3. Using MB Views

#link copied

The MB Views is an official Meta Box addon, which employs a similar approach to the Advanced Views plugin. MB Views uses the Twig engine and allows the addition of CSS and JS code.

View's look of the MB Views addon
MB View screen look

The MB Views may sound similar to the Advanced Views plugin, so we made a comparison table.

NameTypePriceTwig template with CSS/JSTemplate validationFile system optionQuery post featuresSupported vendors
MB ViewsaddonDeveloper/Lifetime Meta Box bundlesyesnononoWP and Meta Box fields
Advanced Views LitepluginfreeyesyesyesyesWP and Meta Box fields, Woo fields + 2 more vendors

Overall, MB Views and Advanced Views appear similar in terms of displaying Meta Box fields. The main distinction is that the Advanced Views Lite plugin is free, and in addition to simplifying field display, it also streamlines queries to the database.

Conclusions

#link copied

In summary, the PHP code method offers flexibility but requires manual markup creation and data-format conversions.

Advanced Views Lite, a free option, simplifies field display and streamlines database queries.

MB Views addon works similarly to Advanced Views Lite, however, it misses some features, like template validation, and comes with an additional cost.

About the Author
Maxim Akimov

Certified WordPress expert from Ukraine with over 8 years of experience. Advocate of the BEM methodology and the overall modular approach. Loves sporting activities and enjoys going to the gym and regularly plays table tennis.

0 Comments

    Leave a comment

    Reply to 

    Please be considerate when leaving a comment.

    Not shown publicly

    Got it