{"id":26557,"date":"2025-03-11T16:15:39","date_gmt":"2025-03-11T16:15:39","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&#038;p=26557"},"modified":"2025-03-11T16:21:36","modified_gmt":"2025-03-11T16:21:36","slug":"jetengine-relations-dynamic-output","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-relations-dynamic-output\/","title":{"rendered":"How to Display Relations Custom Fields"},"content":{"rendered":"\n<p>The <em>JetEngine<\/em>\u2019s <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetengine-wordpress-relations-feature-settings-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">relations feature<\/a> allows you to connect, create, and edit related items just on the editing page of posts, <a href=\"https:\/\/crocoblock.com\/knowledge-base\/features\/custom-content-type\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Custom Content Type (CCT)<\/strong><\/a><strong> <\/strong>items, users, and taxonomies.<\/p>\n\n\n\n<p>You can also add <a href=\"https:\/\/crocoblock.com\/knowledge-base\/features\/meta-field-types-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">meta fields<\/a> to the relations to store additional information about the connected items.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"dynamic-widgets\"><strong>Dynamic Widgets<\/strong><\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>As an example, we will connect actors to movies with the \u2018role\u2019 meta field storing character name.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/relations-dynamic-output-with-the-dynamic-widget.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1000\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/relations-dynamic-output-with-the-dynamic-widget.webp\" alt=\"relations dynamic output with the dynamic widget\" class=\"wp-image-47307\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/relations-dynamic-output-with-the-dynamic-widget.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/relations-dynamic-output-with-the-dynamic-widget-300x164.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/relations-dynamic-output-with-the-dynamic-widget-1024x561.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/relations-dynamic-output-with-the-dynamic-widget-768x421.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/relations-dynamic-output-with-the-dynamic-widget-1536x842.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/relations-dynamic-output-with-the-dynamic-widget-600x329.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"creating-a-relation\"><strong>Creating a relation<\/strong><\/h3>\n\n\n\n<p>We create the \u201cMovies\u201d and \u201cActors\u201d <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-create-a-custom-post-type-based-on-jetengine-plugin\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Custom Post Types (CPTs)<\/strong><\/a> and set the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetengine-how-to-create-relationships-between-posts\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>relation<\/strong><\/a> between them.<\/p>\n\n\n\n<p>In our case, we choose the \u201cMany to many\u201d <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-choose-the-needed-post-relations-and-set-them-with-jetengine-plugin\/#title1\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Relation Type<\/strong><\/a><strong> <\/strong>as we want to connect the actor with several movies in which they\u2019ve played, and the movie with the cast.<\/p>\n\n\n\n<p>Also, we enable the <strong>Register controls for parent object<\/strong>, <strong>Allow to create new children from parent<\/strong>, <strong>Allow to delete children from parent<\/strong>, <strong>Register controls for child object<\/strong>, <strong>Allow to create new parents from children<\/strong>, and <strong>Allow to delete parents from children<\/strong> toggles. With these settings, we can add and remove actors on the movie post editing page and vice versa.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/jetengine-relation-between-post-types.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/jetengine-relation-between-post-types.webp\" alt=\"jetengine relation between post types\" class=\"wp-image-47300\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/jetengine-relation-between-post-types.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/jetengine-relation-between-post-types-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/jetengine-relation-between-post-types-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/jetengine-relation-between-post-types-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/jetengine-relation-between-post-types-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/jetengine-relation-between-post-types-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"adding-a-meta-field-to-the-relation\"><strong>Adding a meta field to the relation<\/strong><\/h3>\n\n\n\n<p>Then, we unroll the <strong>Meta Fields <\/strong>tab and press the \u201c<strong>New Field<\/strong>\u201d button.<\/p>\n\n\n\n<p>We add a meta field for the actor\u2019s role with the \u201c<a href=\"https:\/\/crocoblock.com\/knowledge-base\/features\/meta-field-types-overview\/#text\" target=\"_blank\" rel=\"noreferrer noopener\">Text<\/a>\u201d type that will contain the same information for the \u201cActors\u201d and \u201cMovies\u201d <strong>Post Types<\/strong>, so it\u2019s convenient to create it once in relation than adding two separate fields to each <strong>CPT<\/strong>.<\/p>\n\n\n\n<p>After that, the \u201c<strong>Add Relation<\/strong>\u201d button can be clicked to save the settings.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/relation-meta-field.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/relation-meta-field.webp\" alt=\"relation meta field\" class=\"wp-image-47306\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/relation-meta-field.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/relation-meta-field-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/relation-meta-field-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/relation-meta-field-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/relation-meta-field-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/relation-meta-field-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"connecting-the-related-items-and-adding-the-metadata\"><strong>Connecting the related items and adding the metadata<\/strong><\/h3>\n\n\n\n<p>Afterward, we proceed to the \u201cActors\u201d tab on the <strong>WordPress Dashboard<\/strong> and edit one of the posts.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/custom-post-editing.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/custom-post-editing.webp\" alt=\"custom post editing\" class=\"wp-image-47298\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/custom-post-editing.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/custom-post-editing-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/custom-post-editing-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/custom-post-editing-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/custom-post-editing-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/custom-post-editing-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>We scroll down the post-editing page and click the <strong>\u201cAdd New Movies\u201d <\/strong>button to create related movies for the actor. The \u201c<strong>Connect Movies<\/strong>\u201d button sets the relationship between the actor and the already-created movie posts.<\/p>\n\n\n\n<p>In the <strong>Add New Movies <\/strong>pop-up, we enter the movie\u2019s <strong>TITLE<\/strong>, which will be the title of the post, and push the \u201c<strong>Add New Movies<\/strong>\u201d button.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/adding-new-related-items.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/adding-new-related-items.webp\" alt=\"adding new related items\" class=\"wp-image-47297\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/adding-new-related-items.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/adding-new-related-items-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/adding-new-related-items-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/adding-new-related-items-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/adding-new-related-items-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/adding-new-related-items-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>In the <strong>Edit Meta Fields <\/strong>pop-up, we fill in the \u201cROLE\u201d meta field and hit the <strong>\u201cSave Meta Data\u201d <\/strong>button.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/save-relation-meta-data.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/save-relation-meta-data.webp\" alt=\"save relation meta data\" class=\"wp-image-47308\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/save-relation-meta-data.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/save-relation-meta-data-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/save-relation-meta-data-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/save-relation-meta-data-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/save-relation-meta-data-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/save-relation-meta-data-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>After that, the post can be updated.<\/p>\n\n\n\n<p>Repeat the steps with other posts if needed.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"creating-a-custom-query\"><strong>Creating a custom query<\/strong><\/h3>\n\n\n\n<p>We navigate to <strong><em>WordPress Dashboard &gt;<\/em><\/strong> <strong><em>JetEngine &gt; Query Builder<\/em><\/strong><strong> <\/strong>and click the <strong>\u201cAdd New\u201d <\/strong>button.<\/p>\n\n\n\n<p>We need to create two queries for each post type (one for displaying parent items and one for displaying child items), so let\u2019s begin with the \u201cMovies\u201d <strong>CPT<\/strong>.<\/p>\n\n\n\n<p>We give the query a <strong>Name<\/strong> and keep the \u201cPost Query\u201d <strong>Query Type<\/strong> in the <strong>General Settings<\/strong>. In the <strong>Post Query General <\/strong>tab, we pick the \u201cMovies\u201d <strong>Post Type<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/query-for-the-related-items.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/query-for-the-related-items.webp\" alt=\"query for the related items\" class=\"wp-image-47301\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/query-for-the-related-items.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/query-for-the-related-items-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/query-for-the-related-items-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/query-for-the-related-items-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/query-for-the-related-items-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/query-for-the-related-items-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>Then, we open the <strong>Post &amp; Page<\/strong> tab, click the \u201c<strong>database<\/strong>\u201d icon near the <strong>Post In<\/strong> field, and select the \u201cRelated Items\u201d option.\u00a0<\/p>\n\n\n\n<p>We pick the needed relation in the <strong>From Relation <\/strong>dropdown, the \u201cParent Object\u201d option in the <strong>From Object (what to show)<\/strong> dropdown (as it\u2019s a query for \u201cMovies\u201d that is the parent post type in our relationship), and \u201cCurrent Object ID\u201d in the <strong>Initial Object ID From (get initial ID here) <\/strong>dropdown (as we want to display the \u201cMovies\u201d <strong>Listing Grid <\/strong>on the \u201cActors\u201d <strong>Single Page<\/strong> so that query will identify the post and show the related posts).<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/related-items-macro.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/related-items-macro.webp\" alt=\"related items macro\" class=\"wp-image-47305\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/related-items-macro.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/related-items-macro-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/related-items-macro-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/related-items-macro-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/related-items-macro-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/related-items-macro-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>We hit the \u201c<strong>Apply\u201d <\/strong>and <strong>\u201cAdd Query\u201d <\/strong>buttons and created a similar query for the \u201cActors\u201d post type.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"creating-a-listing-item\"><strong>Creating a Listing Item<\/strong><\/h3>\n\n\n\n<p>Now, we need two <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetengine-listing-functionality-how-to-create-a-new-listing-to-apply-for-the-certain-post-type\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Listings<\/strong><\/a><strong> <\/strong>for two post types. Initially, we create one for the \u201cActors\u201d posts and wish to display the metadata with the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetengine-dynamic-field-widget-overview-how-to-use-filter-field-output\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Dynamic Field<\/strong><\/a><strong> <\/strong>widget.<\/p>\n\n\n\n<p>In the <strong>Dynamic Field <\/strong>widget settings, we select the \u201cRelation Meta Data\u201d as the <strong>Source<\/strong> and choose the \u201cRole\u201d name of our <strong>Meta Field <\/strong>for the relationship.<\/p>\n\n\n\n<p>Then, we proceed to the end of the widget and set the \u201cRelated Items from Movies &gt; Actors\u201d <strong>Context.<\/strong><\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/displaying-the-relation-meta-data-with-dynamic-field.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/displaying-the-relation-meta-data-with-dynamic-field.webp\" alt=\"displaying the relation meta data with dynamic field\" class=\"wp-image-47299\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/displaying-the-relation-meta-data-with-dynamic-field.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/displaying-the-relation-meta-data-with-dynamic-field-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/displaying-the-relation-meta-data-with-dynamic-field-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/displaying-the-relation-meta-data-with-dynamic-field-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/displaying-the-relation-meta-data-with-dynamic-field-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/displaying-the-relation-meta-data-with-dynamic-field-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>Then, we update the <strong>Listing Item <\/strong>and create the similar one for the \u201cMovies\u201d post type.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"adding-the-listing-grid-on-the-single-page\"><strong>Adding the Listing Grid on the Single Page<\/strong><\/h3>\n\n\n\n<p>We navigate to the \u201cMovies\u201d <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/creating-custom-post-type-archive-template-with-jetengine-listing-grid\/#title2\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Single Page<\/strong><\/a> (which can be created with the <a href=\"https:\/\/crocoblock.com\/plugins\/jetthemecore\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>JetThemeCore<\/em><\/a> plugin), which contains the general information about a movie, and drag-n-drop the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetengine-listing-grid-widget-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Listing Grid<\/strong><\/a> widget here to display the cast. In the <strong>General <\/strong>settings, we select the <strong>Listing Item <\/strong>for the \u201cActors\u201d <strong>CPT<\/strong>. Then, we open the <strong>Custom Query <\/strong>tab, enable the toggle, and pick the query for the actors.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/single-page-for-movies.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/single-page-for-movies.webp\" alt=\"single page for movies\" class=\"wp-image-47310\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/single-page-for-movies.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/single-page-for-movies-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/single-page-for-movies-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/single-page-for-movies-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/single-page-for-movies-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/single-page-for-movies-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>We complete the same for the \u201cActors\u201d Single Page.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/03\/single-page-for-actors.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"618\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/03\/single-page-for-actors-1024x618.webp\" alt=\"single page for actors\" class=\"wp-image-47318\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/03\/single-page-for-actors-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/03\/single-page-for-actors-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/03\/single-page-for-actors-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/03\/single-page-for-actors-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/03\/single-page-for-actors-600x362.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/03\/single-page-for-actors.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>That\u2019s one of the examples. You can display the metadata with any <em>JetEngine<\/em> <a href=\"https:\/\/crocoblock.com\/knowledge-base\/features\/dynamic-widgets-and-blocks\/\" target=\"_blank\" rel=\"noreferrer noopener\">Dynamic widgets<\/a>.<\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"related-items-count-dynamic-tag\"><strong>Related Items Count Dynamic Tag<\/strong><\/h2>\n\n\n\n<p>To display the related item count, go to the Single Page of the related object (the Single template for the \u201cActors\u201d <strong>CPT<\/strong> in our case) and drag-n-drop the <strong>Header <\/strong>widget here.<\/p>\n\n\n\n<p>Click the <strong>\u201c<\/strong><a href=\"https:\/\/crocoblock.com\/knowledge-base\/features\/dynamic-tags-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Dynamic Tags<\/strong><\/a>\u201d button and select the \u201cRelated Items Count\u201d dynamic tag.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/Related-Items-Count-dynamic-tag.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/Related-Items-Count-dynamic-tag.webp\" alt=\"Related Items Count dynamic tag\" class=\"wp-image-47304\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/Related-Items-Count-dynamic-tag.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/Related-Items-Count-dynamic-tag-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/Related-Items-Count-dynamic-tag-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/Related-Items-Count-dynamic-tag-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/Related-Items-Count-dynamic-tag-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/Related-Items-Count-dynamic-tag-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>There are such <strong>Settings<\/strong> of the Related Items Count dynamic tag:<\/p>\n\n\n\n<ul>\n<li><strong>From Relation<\/strong> \u2014 specify the relation from where you want to get the number of parent or children items;<\/li>\n\n\n\n<li><strong>From Object<\/strong> \u2014 specify if you want to display the number of children (\u201cChild Object\u201d option) or parent (\u201cParent Object\u201d option) items (e.g., we want to get the number of the related movies (parent items) for the actor from (child item), so we select the \u201cParent Object\u201d option);<\/li>\n\n\n\n<li><strong>Initial Object ID From<\/strong> \u2014 indicates from where the dynamic tag will get the object ID to display the number of related items:\n<ul>\n<li><strong>Current Object ID<\/strong> \u2014 shows the number of related items of the current post on the Single Page (as in our example), of the current active listing item, and so on;<\/li>\n\n\n\n<li><strong>Current User ID <\/strong>\u2014 shows the number of related items of the currently logged-in user;<\/li>\n\n\n\n<li><strong>Queried User ID <\/strong>\u2014 indicates the number of related items of the selected user, e.g., on the User Page in the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetengine-user-profile-builder-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Profile Builder<\/strong><\/a>;<\/li>\n\n\n\n<li><strong>Query Variable<\/strong> \u2014 shows the number of related items from the global request or WordPress request variables. If you select this option, the fourth <strong>Variable Name <\/strong>field will appear;<\/li>\n\n\n\n<li><strong>Current Object Variable<\/strong> \u2014 shows the number of related items from the object defined as current by <em>JetEngine<\/em>.<strong> <\/strong>If you select this option, the fourth <strong>Variable Name <\/strong>field will<strong> <\/strong>appear;<\/li>\n\n\n\n<li><strong>Default WordPress Object (for current page)<\/strong> \u2014 always shows the number of related items of a current global object for the current page defined by WordPress, as opposed to the \u201cFrom Relation\u201d option. For instance, on a single page\/single post, it will always be the current post, even if you go to the listing added to this page.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Variable Name<\/strong> \u2014 this field appears if you select the \u201cQuery Variable\u201d or \u201cCurrent Object Variable\u201d options. This option allows setting the variable\u2019s name, which the plugin will search for in the dynamic tag or current object.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/Related-Items-Count-dynamic-tag-settings.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/Related-Items-Count-dynamic-tag-settings.webp\" alt=\"Related Items Count dynamic tag settings\" class=\"wp-image-47303\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/Related-Items-Count-dynamic-tag-settings.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/Related-Items-Count-dynamic-tag-settings-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/Related-Items-Count-dynamic-tag-settings-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/Related-Items-Count-dynamic-tag-settings-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/Related-Items-Count-dynamic-tag-settings-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/Related-Items-Count-dynamic-tag-settings-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>In the <strong>Advanced<\/strong> tab, there are such fields:<\/p>\n\n\n\n<ul>\n<li><strong>Before<\/strong> and <strong>After<\/strong> \u2014 here, you can enter a text before and after the number. In those two fields, you can use indents to separate the number from the text;<\/li>\n\n\n\n<li><strong>Fallback<\/strong> \u2014 enter the text that will be shown if data fails to be displayed.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/Related-Items-Count-dynamic-tag-advanced-settings.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/Related-Items-Count-dynamic-tag-advanced-settings.webp\" alt=\"Related Items Count dynamic tag advanced settings\" class=\"wp-image-47302\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/Related-Items-Count-dynamic-tag-advanced-settings.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/Related-Items-Count-dynamic-tag-advanced-settings-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/Related-Items-Count-dynamic-tag-advanced-settings-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/Related-Items-Count-dynamic-tag-advanced-settings-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/Related-Items-Count-dynamic-tag-advanced-settings-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/Related-Items-Count-dynamic-tag-advanced-settings-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>Hit the <strong>\u201cPublish\u201d <\/strong>button after you finish working with the Single Page.<\/p>\n\n\n\n<p>That\u2019s it. Now you know how to display the relation metadata with the <em>JetEngine<\/em> dynamic widgets and dynamic tags for WordPress.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Discover how to create meta fields and set metadata for relations, as well as display metadata with the JetEngine dynamic widgets and dynamic tags for WordPress website.<\/p>\n","protected":false},"author":8,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[399],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Display Relations Custom Fields \u2014 JetEngine | Crocoblock<\/title>\n<meta name=\"description\" content=\"Discover how to create meta fields and set metadata for relations, and display metadata with the WordPress JetEngine dynamic widgets and dynamic tags.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-relations-dynamic-output\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Display Relations Custom Fields \u2014 JetEngine | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Discover how to create meta fields and set metadata for relations, and display metadata with the WordPress JetEngine dynamic widgets and dynamic tags.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-relations-dynamic-output\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-11T16:21:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/relations-dynamic-output-with-the-dynamic-widget.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-relations-dynamic-output\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-relations-dynamic-output\/\",\"name\":\"How to Display Relations Custom Fields \u2014 JetEngine | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2025-03-11T16:15:39+00:00\",\"dateModified\":\"2025-03-11T16:21:36+00:00\",\"description\":\"Discover how to create meta fields and set metadata for relations, and display metadata with the WordPress JetEngine dynamic widgets and dynamic tags.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-relations-dynamic-output\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-relations-dynamic-output\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-relations-dynamic-output\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Display Relations Custom Fields\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Display Relations Custom Fields \u2014 JetEngine | Crocoblock","description":"Discover how to create meta fields and set metadata for relations, and display metadata with the WordPress JetEngine dynamic widgets and dynamic tags.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-relations-dynamic-output\/","og_locale":"en_US","og_type":"article","og_title":"How to Display Relations Custom Fields \u2014 JetEngine | Crocoblock","og_description":"Discover how to create meta fields and set metadata for relations, and display metadata with the WordPress JetEngine dynamic widgets and dynamic tags.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-relations-dynamic-output\/","og_site_name":"Help Center","article_modified_time":"2025-03-11T16:21:36+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/02\/relations-dynamic-output-with-the-dynamic-widget.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-relations-dynamic-output\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-relations-dynamic-output\/","name":"How to Display Relations Custom Fields \u2014 JetEngine | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2025-03-11T16:15:39+00:00","dateModified":"2025-03-11T16:21:36+00:00","description":"Discover how to create meta fields and set metadata for relations, and display metadata with the WordPress JetEngine dynamic widgets and dynamic tags.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-relations-dynamic-output\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-relations-dynamic-output\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-relations-dynamic-output\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Display Relations Custom Fields"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/26557"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/8"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=26557"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=26557"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=26557"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}