How to Display JetEngine Meta Fields Using Stackable Blocks
Dynamic Content is a Stackable Premium feature
You can use JetEngine Meta Fields as Dynamic Sources with Stackable's Dynamic Content feature. This integration will allow you to display your JetEngine Meta Field content inside Stackable blocks and native blocks.
Creating a JetEngine Meta Field
First you will need to install and activate JetEngine in your WordPress site. After, you will find it in your Dashboard labeled JetEngine. When you hover over the JetEngine tab, click on Meta Boxes.
A new page will open where you can create your Meta Fields. Click Add New then fill up the fields accordingly. When you finish, click Add Meta Box.
You can edit the field attributes to select whether to add this meta box to Posts, Taxonomies or Users.
You can also choose whether to add the Edit meta box link to your post so that you can easily edit it any time with just one click.
JetEngine Meta Boxes also provides you with Visibility Conditions options. Here you’ll see a section where you can select Post Types where this meta box should be shown.
Afterwards, if you click on the New Condition button, you can choose to Include or Exclude Posts, Include or Exclude posts for certain user roles, and show meta box only if post has Taxonomy terms met.
Now, if you click on the New Meta Field button, you can then populate the fields. For this example, we created a Team Members Meta Field which will show in Posts.
Displaying the JetEngine Meta Fields Using Stackable Blocks
Navigate to Posts in your Dashboard and select Add New. Once you create a new post, you will find the Meta Fields at the bottom of your screen.
Fill it up with the necessary information then add a title to your post. Once finished, click Publish.
After publishing your post, navigate to Pages in your Dashboard and select Add New. Once you create a new page, add any block you want to use and display the Meta Field content you created. In this example, we used the Stackable Team Member block.
- Highlight the text where you want the Meta Field to be displayed
- Click on the Dynamic Content icon
- Select the Dynamic Source (in this case, Other Posts)
- Select the Posts / Pages then search for your post
- Select the Field under the JetEngine section
Repeat the steps for the other content.
For the image, select the Image block then navigate to the Image panel under the Style tab in the Inspector. You will see the Dynamic Content icon on the upper right side of the image placeholder.
Click the icon and follow the same steps in order to fetch the data.
Displaying the JetEngine Meta Fields Using Stackable blocks and the Query Loop block
To do this, just add any Stackable block inside the native Query Loop block.
Afterwards, populate the fields with the JetEngine Meta Boxes like you normally do and you’ll see that the other blocks inside the Query Loop are automatically being populated as well.
Creating Meta Fields for Taxonomies
To create Meta Fields for Taxonomies, hover over the JetEngine tab in your dashboard, and then click Taxonomies.
A new page will open wherein you can add your taxonomies by clicking Add New button. You can then populate it accordingly.
Once you have finished, click the Add Taxonomy button on the right side to save it. You can find the Post Taxonomy when you hover over the Post tab in the dashboard. In this example, we used Cars.
If you click on it, you can then fill up the tags. Once it's been filled up, click Add New Tag at the bottom.
Now, if you navigate to a new post and then first click on the Post tab in the Inspector, you will see the Cars panel (or whatever taxonomy you added). From there, type in the tag you added (in this case, Toyota Camry) in the Tag field.
Refresh the page, and you’ll then be able to fetch the data.
Add any Stackable block. When you click on the Dynamic Content icon, select Current Post for the Dynamic Source then Post Taxonomy for the Field.
For the Taxonomy Type, you will see what you just created. For this example, select Cars then for the Field, select Toyota Camry - Model.
Afterwards, go ahead and populate the remaining fields! 🎉
For more information, you can also check JetEngine's documentation.