Help Center

How to Display Relations Custom Fields in Elementor

How to Display Relations Custom Fields in Elementor

This tutorial describes how to create meta fields, set metadata for the relations, and display metadata with the WordPress JetEngine Dynamic widgets and Dynamic tags.

The JetEngine’s relations feature allows you to connect, create, and edit related items just on the editing page of posts, CCT items, users, and taxonomies.

Also, you can add meta fields to the relations and set the metadata for every relation.

Dynamic Widgets

relations dynamic output with the dynamic widgets

Creating a relation

We have created the “Movies” and “Actors” Post Types and set the relation between them.

post types relationship

In our case, we have chosen the “Many to many” Relation Type as we want to connect any actor with several movies where they’ve played and any movie with the cast.

Adding a meta field to the relation

Then, we have added a meta field for the actor’s role that will contain the same information for the “Actors” and “Movies” Post Types, so it’s convenient to create it once in relation than adding two separate fields to each CPT.

relation meta field

After hitting the “Update” button, we’ve proceeded to the “Actors” tab on the WordPress Dashboard and pressed to edit one of the posts.

post editing

We’ve moved to the end of the post-editing page and ticked the “Connect Movies” button to set the relationship between the actor and the movies where he’s performed.

connect related items

We’ve chosen the needed movie in the drop-down menu and clicked on the “Connect Movies” button to save the result.

connect movies

In the following pop-up, it’s possible to fill the meta fields. We’ve entered the actor’s role, hit the “Save Meta Data” button, and updated the post.

save metadata

Then, we’ve connected other movies to this actor and repeated the same procedure for other actors’ CPTs.

Creating a Custom Query

If we need to display only the related items in the Listing Grid on the Single Page, it’s required to set the query. If you want to display all posts with the Listing Grid widget, related and non-related together, miss the query creation step.

We’ve navigated to JetEngine > Query Builder on the WordPress Dashboard and clicked on the “Add New” button.

We need to create two queries for each post type, so let’s begin with the “Movies” Post Type query.

We’ve named the query and selected the “Post Query” Query Type in the General Settings. In the Post Query General tab, we’ve picked the “Movies” Post Type.

query for the related items

We’ve opened the Post & Page tab, clicked on the macros icon near the Post In field, and selected the “Related Items” option. We’ve picked the needed Relation, the “Parent Object” option (as it’s a query for movies that is the parent post type in our relationship), and “Current Object ID” (as we want to display the “Movies” Listing Grid on the “Actors” Single Page so that query will identify the post and show the related posts).

related items macro

We’ve hit the “Apply” and “Add Query” buttons and created the familiar query for the “Actors” post type.

Creating a Listing Item, displaying the metadata with the Dynamic widget, and specifying the Context

Now, we need two Listings for two post types. Initially, we’ve created one for the “Actors” posts and wish to display the metadata with the Dynamic Field widget.

We’ve drag-n-dropped the Dynamic Field widget. We’ve selected the “Relation Meta Data” as the Source and chosen the name of our Meta Field for the relationship.

listing item

We’ve proceeded to the end of the widget to set the Context.

Warning

Be aware if you aren’t going to use any query with the Listing Grid, you need to specify the Context. So, for the meta fields created for the relationship, select the “Related Items From…” option. If you want to apply the Custom Query to the Listing Grid, select the “Default Object” option since the query narrows down the results and puts the needed context to the list.

context

We’ve picked the “Default Object” Context as we will use a query.

Then, we’ve updated the Listing Item and created the similar one for the “Movies” post type.

Adding the Listing Grid on the Single Page

We’ve navigated to the “Movies” Single Page, where the general information about a movie is, and drag-n-dropped the Listing Grid widget here to display the cast. In the General settings, we’ve selected the Listing Item for the actors post type. Then, we’ve opened the Custom Query tab, enabled the toggle, and picked the query for the actors.

single page for movies

We’ve completed the same for the “Actors” Single Page.

single page for the actors

That’s one of the examples. You can display the metadata with any JetEngine Dynamic widgets.

To display the related items count, proceed to the Single Page of the related object and drag-n-drop the Header widget here.

heading widget on the single page

Click on the “Dynamic Tags” button and select the “Related Items Count” dynamic tag.

dynamic tags in the heading widget

There are such Settings of the Related Items Count dynamic tag:

  • From Relation. Specify the relation from where you want to get the number of parent or children items;
  • From Object. Specify if you want to display the number of children (Child Object option) or parent (Parent Object option) items (e.g., we want to get the number of the related movies from the parent post type for the actor from the child post type, so we’ve selected the “Parent Object” option);
  • Initial Object ID From. Indicate where the dynamic tag will get the object ID from to display the number of related items:
    • Current Object ID. 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;
    • Current User ID. Shows the number of related items of the currently logged-in user;
    • Queried User ID. Indicates the number of related items of the selected user, e.g., on the User Page in the Profile Builder;
    • Query Variable. Shows the number of related items from the global request or WordPress request variables. If you select this option, the fourth Variable Name will appear;
    • Current Object Variable. Shows the number of related items from the object defined as current by JetEngine. If you select this option, the fourth Variable Name will appear;
    • Default WordPress Object (for current page). Always shows the number of related items of a current global object for the current page defined by WordPress, as opposed to the “From Relation” 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.
  • Variable Name. This field appears if you select the “Query Variable” or “Current Object Variable” options. This option allows setting the variable’s name, which the plugin will search for in the dynamic tag or current object.
related items count settings

In the Advanced tab, there are such fields:

  • Before and After. Here you could enter text before and after the number. In those two fields, you can use indents to separate the number from the text;
  • Fallback. Enter the text that will be shown if data fails to be displayed.
related items count advanced

Hit the “Update” button after you finish working with the dynamic tag and the Single Page.

That’s it. You know now how to display the relation metadata with the WordPress JetEngine Dynamic widgets and Dynamic tags.

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.