Back to contents

JetEngine: How to Create a Custom Meta Box. Meta Field Types Overview

This tutorial reveals the process of working with custom fields made with JetEngine plugin, one of the plugins from a huge Jet family.

We’ll explore how to create a custom meta field with JetEngine plugin and take a closer look at types of these fields.

Custom meta fields display additional information about your custom or default post. You can select the preferable type and add content to it. Let’s dive deeper into the topic.

Adding Meta Fields to the Post

1 Step — Add Meta Box

Once you’ve created a custom post type with JetEngine, you can also create some additional custom meta fields for it. Go to the JetEngine > Meta Boxes block in the WP Dashboard, click the “Add New” button to add a new meta box to the post type you’ve created previously.

You will see a settings window, where you should specify the meta box title, select the Post option in the Meta Box for the field.

There are also available Taxonomy and User options in the Meta Box for the field.

  • If you choose the Taxonomy, you are able to select the taxonomies where this meta box should be shown.
  • In case you want to restrict access for different users, select the Meta Box for: User and set the visibility of meta fields. If you select the “Edit User” option from the dropdown, that meta box will be visible only for website administrator on the Edit User page. And if you pick the “Edit User & Profile” option – the meta box is visible at the User Profile page and the user will be able to edit it.
meta box user settings

When you choose the “Post” type, you can define for what post types it will be enabled in the Enable For Post Types bar. Besides that, you can choose what Specific Posts this meta box will be shown on, and the Excluded Posts where it won’t be visible.

meta box post settings

If you turn the `Edit meta box` link toggle on, it will add a cog-shaped editing button to the post customization page in the dashboard. Clicking on that button will open the meta box editing page.

front meta box editing button

2 Step — Add Meta fields

Now let’s proceed to add and customize meta fields included in this meta box. For that, you should open the Meta fields tab and click the “New Meta Field” button. You need to fill in three fields:

  • Label – type in the title of the field here. This is how it will be shown to you and other users furtherly. 
  • Name/ID – this value is generated automatically, according to the text you put into the Label bar. If you want to change it, keep in mind that the ID shouldn’t include spaces and make sure it consists only of the letters and numbers. The auto-fill will also add a random number to the name if it is not unique. The fields with similar IDs could confuse you and cause some trouble if you’d like to use them somewhere else. That’s why the auto-fill prevents the usage of similar IDs. By the way, if you’ll choose to fill the Label bar with Cyrillic letters – the auto-fill will transliterate it to English.
  • Object type: Field – here you can choose the type of the object. The Field option means that you will be able to add values there. Tab, Accordion, and Endpoint will create a specific layout.
creating meta field

Meta Field Types Overview

Select the type of the custom meta field from the dropdown in the Field type option below. Let’s find out the meaning of each type.

  • Text

If you want to add an extra field with custom text to the post type this type perfectly meets your requirements. You can add additional information about posts using this field. Also, you can specify the available number of characters in the field.

  • Date

Provide information about the date of events, meetings, conferences with the help of this meta field. You can also save the date as a timestamp to allow to query posts by it.

  • Time

This is an appropriate type for adding a time marker for posts. Add the particular time of events, meetings, and conferences in this meta field.

  • Datetime

This custom eta field allows picking date and time in the same place in a convenient way.

  • Textarea

You can use this type for adding a textual area to the posts with the arrangement of the text line by line. Moreover, you can set the character limit for this field value.

  • WYSIWYG

Selecting this type you will add a basic editor in the custom field for adding content with a certain layout and customizing its appearance directly in the WP Dashboard.

  • Switcher

You can add a toggle as a custom field to posts, products, events, etc., which allows you to turn on/ off the appropriate option in the meta field block.

  • Checkbox

This type provides an opportunity to add checkboxes with different options for choosing to default and custom posts.

  • Iconpicker

Create a meta box with an iconpicker, where you will be able to pick an appropriate icon for the posts.

  • Media

This type will assist in adding media files, images in particular, to the posts.

  • Gallery

With the help of this meta field type, you will be able to add multiple images to the posts and products in a gallery form.

  • Radio

Radio type is perfect for adding radio options for choosing by editing default and custom posts.

  • Repeater

This type will help add the repeating content block for every post, product, event, etc., which you will be able to fill with value in the WP Dashboard.

  • Select

Use this content type to add a dropdown selector for the post. In case, you enable Allow to select multiple values options you will be able to select several options at once. This value can be also shown using the proper callback for the Dynamic Field.

  • Number

If you need a field that is filled with numbers only – this will be a perfect one.

  • Colorpicker

You will add a colorpicker tool for the posts choosing this type of meta field.

  • Posts

This type will allow setting and displaying related posts from the WP Dashboard. To do that one needs to use Related posts list callback in the Dynamic Field widget, added to a listing.

Custom Values in Checkbox and Radio Field Types

ATTENTION!
The following functionality can be used for Custom Posts, Custom Taxonomies and Options Page.

When you select the Checkbox or Radio meta field types, there’s an additional option that appears: Allow Custom.

checkbox custom value

This option allows adding custom values to those fields, saving them to a database of the current post but without saving it to the default values list. Here’s how this recently added custom value looks in the Custom Post. Add the value by enabling the toggle and specifying the value itself.

new checkbox
new value

Allow Custom option lets adding different custom values to different Posts. That means, that you can create different custom values for each Post.

However, if you want those custom values to be applied to all the posts in the Custom Post Type, use the Save Custom option.

save custom values

Therefore, all your Posts will contain this new value of the Checkbox field.

custom value added
ATTENTION!
The Radio type of meta field is set up by analogy of the Checkbox one described above.

Other Parameters of Meta Fields

There are the Description and Field width lines, where you can add necessary additional text for the meta field and set the meta field width.

description and field width options

You can specify the Character limit and determine the Default value for the current field. Moreover, it is possible to enable the Is required option to make the field required.

Conditional Logic gives you an opportunity to make fields visible only if come conditions are met. More details about how this feature works you can find in the Conditional Logic tutorial.

NOTE!
The Default value option is available only for textual field types.
advanced settings

After you have added as many meta fields as you need, click the “Update Meta Box” button in order to save the changes.

Now you can fill in the custom meta fields with the values or enrich with media files when customizing the post. Click the Edit option under a certain post and find the created meta box with options, which should be enriched with the content (you can add simple text, define the date, add a link, or even specify the image or images from the media library).

editing the post

You’re free to display the content you’ve added into the custom meta fields using Elementor in the listings and Single post templates.