How to Use Stackable WordPress Plugin with JetEngine
This tutorial will teach you how to integrate JetEngine dynamic data with the Stackable plugin on your WordPress website.
Before you start, check the tutorial requirements:
- Stackable Premium version installed and activated.
- JetEngine plugin installed and activated
There is an excellent opportunity to display the WordPress dynamic data you add with the JetEngine plugin in the Stackable design templates. Let’s find out how to do it in several steps.
Add JetEngine Meta Box
Head to WordPress Dashboard > JetEngine > Meta Boxes and hit the “Add New” button to build a new meta box.
![jetengine meta boxes section](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/03/jetengine-metaboxes-section-full.png)
Complete the General Settings tab paying attention to the Meta Box for the field where you can specify the meta box source.
Also, set the Visibility Conditions if needed.
![add new meta box general settings and visibility conditions](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/03/add-new-meta-box-general-settings-and-visibility-conditions-full.png)
Scroll down to the Meta Fields tab and add new fields by pressing the “New Meta Field” button.
![meta fields tab in the meta box](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/03/meta-fields-tab-in-the-meta-box-full.png)
Adjust as many fields as you need and click the “Add Meta Box” button to save the result.
![posts meta box meta fields](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/03/posts-meta-box-meta-fields-full.png)
Display Meta Fields with Stackable Blocks
Open the source items in your WordPress Dashboard. Now, for instance, we selected usual WordPress Posts as the source. So, we go to WordPress Dashboard > Posts and open one of the posts created earlier or press the “Add New” button to create a new post.
![wordpress posts](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/03/wordpress-posts-full.png)
Here you will spot the tab with the created meta box and its meta fields. Complete them with the desired values and press the “Publish/Update” button.
![meta fields in the wordpress post](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/03/meta-fields-in-the-wordpress-post-full.png)
Navigate to the WordPress Dashboard > Pages directory and click the “Add New” button.
![wordpress pages add new button](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/03/wordpress-pages-add-new-button-full.png)
Place the Stackable Design Library on the page and hit the “Open Design Library” button to find the desired blocks option.
![open design library button](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/03/open-design-library-button-full.png)
Add any Stackable block you think is suitable for the page.
![stackable design library team template](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/03/stackable-design-library-team-template-full.png)
Select the text you want to change into the meta fields data and click on the “Dynamic Fields” button.
![dynamic fields in block editor](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/03/dynamic-fields-button-in-block-editor-full.png)
Pick the needed option as the Dynamic Source.
As we have selected “Other Posts,” the Posts/Pages field appears. Here we choose the same post we need.
Select the needed Field by scrolling down to the JetEngine section and pressing the “Apply” button.
![setting dynamic fields](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/03/setting-dynamic-fields-full.png)
Adjust all the other fields you need accordingly.
![completed stackable block](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/03/completed-stackable-block-full.png)
Image block
Settings location differs a little for the Image block. You can find the Dynamic Content icon in the Image panel of the block Style tab. Click it to set the dynamic image.
![dynamic fields button in image block](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/03/dynamic-fields-button-in-image-block-full.png)
Set the needed values in the customization fields to get the result.
Press the “Publish” button to make the page live.
![image block dynamic fields settings](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/03/image-block-dynamic-fields-settings-full.png)
Show JetEngine Meta Fields in Query Loop
Another way to use the meta fields with Stackable is dynamic data in the Query Loop block. Go to the post you have created, place the Query Loop on the page, and the desired design with the Design Library inside it.
Then follow the steps we have taken before — press the “Dynamic Fields” button and find the needed meta field in the Field list. Don’t forget to click the “Apply” button.
![dynamic content in query loop block](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/03/dynamic-content-in-query-loop-block-full.png)
Then work on other fields if needed and update the post.
![query loop block in the post](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/03/query-loop-block-in-the-post-full.png)
Build Meta Fields for Taxonomies
Also, you can display the Taxonomy of the post. Firstly, make sure you have created a taxonomy.
Then head to the needed post and add any Stackable block. Find the “Dynamic Fields” button and adjust the following settings.
Select “Current Post” as a Dynamic Source and pick the “Post Taxonomy” Field. As well, choose the needed Taxonomy Type and Display Option.
![display jetengine taxonomy with stackable](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/03/display-jetengine-taxonomy-with-stackable-full.png)
That’s it; now you know all the integration features available with JetEngine and Stackable for your WordPress website customization.