How to Create WordPress Custom Fields with JetEngine

Editorial Staff

November 18, 2020

With WordPress, you can be a professional web developer even if you have no coding skills. The key is, you understand how custom fields work and how to create ones. Wait, what is a custom field?

When you read a blog post on a WordPress site, you see elements like post title, post author, post date, post content, featured image, and so on. In WordPress, these elements are called fields. The mentioned elements are the default fields of WordPress. For a certain need, you can create custom fields. For instance, if you want to create a bike rental website, you might want to add fields like bike type, rent cost, drop location, and so on. You can then use those custom fields to sort the items (bike) you offer. WooCommerce is the perfect example of how custom fields supposed to be implemented. For a more detailed explanation about WordPress custom fields, you can refer to this article.

What is JetEngine?

As we said above, you don’t need to have programming skills to become a web developer with WordPress. If you need to create custom fields, you can use a plugin. One of the plugins you can use is JetEngine. JetEngine is a plugin developed by Crocoblock. It’s built exclusively for Elementor. In other words, you need to use Elementor to use JetEngine. You can use the free version of Elementor to use JetEngine. While for the JetEngine plugin itself, you can get it for $26 per year. In addition to creating custom fields, you can also use JetEngine to a custom form and connect it with popular services like Mailchimp and ActiveCampaign.

How to create custom fields with JetEngine

Before getting started, make sure you have installed and activated both Elementor and JetEngine on your WordPress site. You can get JetEngine on the official website of Crocoblock. While for Elementor, you can get it on the WordPress plugin directory. If you are new to WordPress, you can read our previous article to learn how to install a WordPress plugin. JetEngine itself supports the following field types:

  • Text
  • Date
  • Time
  • Datetime
  • Text area
  • WYSIWYG
  • Switcher
  • Checkbox
  • Icon picker
  • Media
  • Gallery
  • Radio
  • Repeater
  • Select
  • Number
  • Color picker

Once you are ready, go to JetEngine -> Meta Boxes on your WordPress dashboard and click the Add New button to create a custom field group.

On the General Settings section, give your field group a name on the Meta Box Title field. Select a content type you want to assign the field group to on the Meta Box for option and select the post type on the Enable For Post Types option. For instance, if you want to assign the field group to the default post type (blog post), you can use the following rule.

Next, go to the Meta fields section to add the custom fields. To add a new custom field, you can click the New Meta Field button.

Add your custom field a label and name on the Label field and Name/ID field, respectively. Also set the object type and field type on the Object type option and Field type option. If you want to set the custom field as a required field, you can enable the Is required option.

Repeat the steps above to add more custom fields according to your need. Once done adding the custom fields, you can click the Add Meta Box button to publish the custom field group.

In case there are fields you missed or there are some parameters you want to edit, you can go to JetEngine -> Meta Boxes to edit the custom field group you have just created. Simply click the Edit link to edit the field group.

Assuming you assigned the custom field group to the default post type (blog post), you should see a new field group beneath the WordPress block editor.

The next step, you can create a page or a theme builder template and edit it with Elementor (you can read this article if you are new to Elementor). On the Elementor editor, add the Dynamic Field widget to the canvas area (you can also use the Heading or Text Editor widget).

Go to the left panel to customize the custom field content. On the Source option, set it to Meta Data. You can then select a custom field from the custom field group you have just created on the Meta Field option.

You can also add a field icon and fallback (default value if field is empty) if you want it. To style up the custom fields, you can switch to the Style tab. You can set things like the typography (font family, font size, font style and so on), text color, alignment, and so on. Once you are done editing your page, you can publish it.

The bottom line

The ability to create custom fields is one of the features offered by WordPress as an open content management system. As a web developer, understanding how custom fields work is crucial. JetEngine is one of the plugins that you can use to create custom fields. Unlike other similar plugins like Advanced Custom Fields and Pods, JetEngine is built exclusively for Elementor. Elementor itself is the most popular page builder for WordPress. In addition to creating custom fields, you can also use JetEngine to create custom forms and custom post types.

Tags: jetengine

This page may contain affiliate links, which help support UtilizeWP.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Share This