Back to contents

JetEngine: How to Create a Custom Meta Box

From this tutorial, you will find out how to create meta boxes with meta fields and apply them to the posts, terms, or users using the JetEngine plugin.

JetEngine is a perfect addon, which provides a lot of tools for displaying dynamic content in Elementor. With its help, you will be able to create custom post types, taxonomies, add meta boxes, and versatile meta fields, and then display them on page templates built with Elementor. In this tutorial, we will talk about meta boxes.

What is a Meta Box?

In simple words, Meta Box is a container for meta fields. It stores the meta fields you put inside, helps to organize and maintain them. If you need to create a few Custom Post Types with a similar set of meta fields, you can create a Meta Box and then assign it to several CPTs. Besides that, a Meta Box can be applied to default WordPress Posts or Terms, as well as to Users.

How to create a Meta Box?

The list of Meta boxes

First, open the WordPress Dashboard and proceed to the JetEngine > Meta Boxes block. Click the “Add New” button at the top of the page.

General Settings

Metabox general settings
  • Meta Box Title. This is the name of the meta box that will be shown in the meta boxes table and in every post, taxonomy, or user profile it is attached to;
  • Meta Box for. Here you can select the content type that this meta box will be assigned to. The Post option refers to both default Posts and Custom Post Types you created with the help of JetEngine functionalities. If you choose Taxonomy, it will become possible to assign the meta box to default WP Terms and Custom Taxonomies you created for the CPTs. The User option will link the meta box with the Users’ accounts. The further settings that will appear in this block depend on what you have chosen in this option;
  • ‘Edit meta box’ link. If you turn this toggle on, it will add a cog-shaped edit button to the post customization page in the dashboard. Click on that button to open the meta box editing page.
edit metabox button

Meta Fields

Finally, you can add the Meta Fields to the box. There are no limitations on the number of meta fields in one meta box. You can add as many of them as you want by clicking the “New Meta Field” button. Any of the Meta Fields can be edited, duplicated, and deleted. Besides that, you can change the position of the field in a list by simply dragging it with the pointer.

adding new meta fields

You can find more detailed information about available options in the meta field’s settings from this tutorial.

When you are done, click the “Add Meta Box” button to save progress.

Add Meta Box button

That’s all. You see how easy it is to add a meta box that groups the meta fields together.