One of the features offered by WordPress is the ability to add custom fields. This feature is very useful if you want to create a complex, dynamic website that involves lots of additional meta fields that are not offered by WordPress by default. Elementor (the pro version) supports dynamic content that allows you to process WordPress custom fields. You can add WordPress custom fields to your Elementor designs (pages or templates). But how to add custom fields themselves? Read on to learn more.
What are WordPress Custom Fields?
Before we jump to the how-to section, let’s cover this first. Custom fields are a set of metadata that store additional information about blog posts, pages, custom post types, or taxonomies. The information can be vary depending on your purpose. For instance, if you want to create a bike rental website, you might want to add information like hourly rate, pick up location, drop location, pick up date, drop date, and so on.
Or, if you want to create a movie review website, you might want to add information like score, genre, and review summary.
In the example above, score, genre and review summary are called custom fields.
You might be asking, why don’t just add the score, genre, and review summary on the WordPress editor?
Of course, you can do so. But, imagine if you wan to create a “greatest movies of all-time” list and you want your users to be able to sort the movie by score, title, or genre. How could you accomplish it? This is how custom fields come into play. Custom fields offer more flexibility to sort and manage and content on your WordPress site.
Custom fields are especially crucial for complex sites like real estate listing sites or trip agency websites as you will be able to offer better experiences for users such as the ability to sort the item by price, rating, facility, and so on.
In order to get the most out of custom fields, you can also create a custom post type. A custom post type allows you to create a new content type on your WordPress site other than the default content types offered by WordPress such as blog posts and pages. If you use WooCommerce, it is a perfect example of the implementation of custom fields and a custom post type.
How to Add Custom Fields in Elementor
There are two WordPress plugins we recommend to add custom fields in Elementor or WordPress in general:
- Advanced Custom Fields a.k.a ACF (freemium).
- JetEngine (premium. $43/year).
ACF is a great solution if you are looking for a free plugin to add custom fields in Elementor, but Elementor Pro is required. ACF has native integration support with Elementor Pro.
Being a paid plugin, JetEngine offers more features than ACF. In addition to creating custom fields, you can also use it to create custom post types, custom taxonomies, custom forms, and listing items.
Adding Custom Fields in Elementor Using ACF
Before being able to add custom fields using ACF, make sure you have installed and activated the ACF plugin on your WordPress site. The free version of this plugin is available on the WordPress plugin directory. Make sure that you have upgraded your Elementor to the pro version as well in case you haven’t done so.
Once everything is ready, go to Custom Fields -> Add New to add a new custom field group.
Give your field group a name and click the Add Field button to add a custom field.
The custom field form will open once you clicked the Add Field above. Add the required parameters like field label, field name, field type, place holder, and so on.
You can click the Add Field button to add more custom fields. You can set the order of the custom fields by dragging them up and down.
Once done adding the custom fields, switch to the Location section beneath the custom field form. Set post type where you want to show the custom field group on. Whether on the blog posts, pages, custom post types, or taxonomies.
Next, go to the Settings section to set the location of the custom field group, style, label placement, and instruction placement. Once done, click the Publish button to apply the custom fields to the selected content type.
If there are some fields you missed or there some parameters you want to edit, you can edit your custom field group by going to Custom Fields -> Field Groups. Hover your mouse over the custom field group you want to edit and click the Edit link.
Adding the Custom Field Types Created with ACF to an Elementor Design
You can use the custom fields you have created with ACF above on your Elementor designs. Be it pages or theme builder templates. To do so, edit a page/template you want to add your custom fields to with Elementor. Add a new widget (i.e. the Heading widget). Once the widget is added, go to the left panel to set the content and click the database icon and select ACF Field.
Click the wrench icon and select the field you want to add from the dropdown menu on the Key option.
Adding Custom Fields in Elementor Using JetEngine
To add custom fields using JetEngine, make sure you have installed and activated the JetEngine plugin on your WordPress site. You can get it from the Crocoblock website. Crocoblock is the developer of JetEngine.
Unlike ACF, JetEngine works on both Elementor Free and Elementor Pro.
To start adding custom fields with JetEngine, go to JetEngine -> Meta Boxes.
Click the Add New button to start adding the custom meta field group.
On the General Settings section, give your custom meta field group a name and set a content type where they to be displayed. Just like ACF, you can also display the custom field group whether on blog posts, pages, custom post types, or taxonomies.
To add the custom meta fields, switch to the Meta fields section and click the New Meta Field button to add a new custom field.
Add the required parameters like field label, field name, field type, and so on. On the Object type section — since you want to create custom fields — set it to Field.
You can simply click the New Meta Field button to add more custom fields. You can set the order of the custom field types by dragging them up and down.
Once done adding the custom fields, you can click the the custom fields button to apply the custom meta fields to the selected content type.
Adding the Custom Field Types Created with JetEngine to an Elementor Design
To use the custom fields you have just added with JetEngine to an Elementor design, simply edit the page/page you want to add the custom fields to with Elementor. Add a new widget (i.e. the Heading widget). Once the widget is added, go to the left panel to set the content. Click the database icon and select Custom Field on the JetEngine section.
Click the wrench icon and select a custom field you want to use from the dropdown menu on the Field option.
The Bottom Line
Custom fields are crucial to unlocking the power of WordPress. Thanks to them, you can create a dynamic, complex website like e-commerce, real estate listing, and so on. The ability to handle custom fields is one of the things that makes Elementor so special as a page builder plugin. You can add tailored dynamic content to your designs by taking advantage of custom fields.
3 thoughts on “How to Add Custom Fields in Elementor (The Comprehensive Guide)”
As of E Pro 3.0, ACF has not been able to render data to the browser. Fresh install of all thing current, Chrome, Elementor, EPro, and ACF with no other plugins. I have tested this since every update to E and EPro and the data does show up in the admin but simply does not exist in the browser. I have replicated this with another person and they as well were unable to get the data to show up in the browser. I have had to switch to Jet Engine (which did the same thing for a while), but now works. I don’t know if this is a ACF issue or and Elementor issue but it still exists today (10/05/20).
Thanks for this very comprehensive post.
I’m using the Astra theme and Elementor Pro. After reading this post, I’m wondering whether I really need to create Custom Post Types since Elementor post templates and custom fields seem to be enough. I’m aware of some differences between both approaches but I may be overlooking something.
Any advice ?
First, you need to understand the difference between custom post type and default post type. Blog posts and pages are two examples of default post type. A custom post type is created to accommodate a content type other than default post types.
For instance, if you want to create a property listing website, you definitely want the property listing items to have different elements and layout than blog posts and pages. In this case, you can create a custom post type for the listing items and add the necessary elements (fields). Elementor Pro also allows you to create a custom template for custom post type.