JetEngine Custom Fields

JetEngine by Crocoblock is a popular custom fields and content modelling plugin. UiChemy integrates with it via three dynamic tags and through the standard post.meta() Twig expression, letting you surface JetEngine field values in any Composer widget without writing PHP.

JetEngine Dynamic Tags

Dynamic tags bind JetEngine field values to Elementor widget controls, text, images, URLs, without writing code. In the Elementor panel, look for the dynamic tag icon on a field, click it, and choose from the JetEngine group.

Source option. All three tags have a Source setting:

Field picker. When JetEngine exposes its registered fields via its API, the tag shows a dropdown populated with your field names. When the API isn't available, the tag shows a text input, enter the meta key manually.

JetEngine Fields in Twig

Inside a Composer widget's HTML panel, access JetEngine field values using post.meta():

{{ post.meta('field_key') }}

Use the meta key, the field name you defined in JetEngine's meta box builder, not the label.

Text and number fields:

<p>{{ post.meta('years_of_experience') }} years of experience</p>
<span>{{ post.meta('job_title') }}</span>
<a href="{{ post.meta('portfolio_url') }}">View Portfolio</a>

Conditional output:

{% if post.meta('is_featured') %}
  <span class="badge">Featured</span>
{% endif %}

{% if post.meta('deadline') %}
  <p class="text-label">Deadline: {{ post.meta('deadline') }}</p>
{% endif %}

Author meta fields. For fields attached to users via JetEngine:

{{ post.author.meta('expertise_area') }}
{{ post.author.meta('social_twitter') }}

Image fields. JetEngine image/media fields typically return the attachment ID or URL, use accordingly:

{# If the field returns an attachment ID #}
{% set photo_id = post.meta('team_photo') %}
{% if photo_id %}
  <img src="{{ photo_id|wp_image_src('medium') }}" alt="{{ post.meta('team_member_name') }}">
{% endif %}

{# If the field returns a direct URL #}
<img src="{{ post.meta('logo_url') }}" alt="Company Logo">

For reliable image binding in Elementor widget image controls, use the JetEngine Image dynamic tag instead.

Repeater fields. JetEngine repeater fields return arrays, iterate over them in Twig:

{% for item in post.meta('service_features') %}
  <li>{{ item.feature_name }}</li>
{% endfor %}

Combining JetEngine With get_posts Loops

JetEngine data works inside get_posts loops. Each iteration gives you the loop post's meta:

{% for post in get_posts({
  post_type: 'team_member',
  posts_per_page: 12,
  orderby: 'menu_order',
  order: 'ASC'
}) %}
  <div class="team-card">
    <img
      src="{{ post.thumbnail.src('medium') }}"
      alt="{{ post.title }}"
    >
    <h3>{{ post.title }}</h3>
    <p class="text-label">{{ post.meta('job_title') }}</p>
    <p>{{ post.meta('bio_short') }}</p>
    {% if post.meta('linkedin_url') %}
      <a href="{{ post.meta('linkedin_url') }}">LinkedIn</a>
    {% endif %}
  </div>
{% endfor %}

This works with any JetEngine custom post type, the post_type parameter matches your registered CPT slug.

Use Cases

• Surfacing a JetEngine custom field (post or user meta) inside a Composer widget without writing PHP.
• Binding a field with no code, via the dynamic tags panel, once JetEngine and Pro are both active.
• Reading a field with JetEngine deactivated, post.meta() in Twig still works since the data is stored as plain meta underneath.

Frequently Asked Questions

Related