Greetings WordPressers! Today’s tutorial will center around creating dynamic content using Jet Engine and Elementor Pro. For those new to the world of WordPress, all the resources mentioned will be linked in the description below, so don’t forget to check them out!
Introduction to Dynamic Content
Dynamic content allows you to automatically customize your webpage’s content based on a set of criteria. This tutorial will guide you on how to utilize custom post types and custom fields to store your data and then display it on your website.
Imagine a real-world scenario where you have a website with a hero section that contains a chalkboard listing the specials for the day. This chalkboard content is a perfect candidate for dynamic content. Rather than manually updating the text field every day, wouldn’t it be more efficient if it updated itself based on the specials you’ve entered for the day?
The objective of this tutorial is to accomplish exactly that: replace the static text field with dynamic content based on a custom post type containing information for the daily special and the date it’s available.
This transformation will happen in three steps:
- Creating a custom post type and adding the necessary fields using Jet Engine.
- Creating a listing template.
- Displaying the listing template dynamically on your website using the Jet Engine and Elementor Pro.
Step 1: Creating a Custom Post Type
The first step involves setting up a basic website with Jet Engine and Elementor Pro installed. Navigate to the Jet Engine section on your dashboard and select “Post Types.” Here, create a new post type called “Specials” and add two meta fields – one for the date and one for the order of the specials for the day.
For the date field, ensure it’s saved as a timestamp to allow Jet Engine to display the right specials on the correct dates. The order field allows you to rearrange the list of specials if they are entered in the wrong order.
Step 2: Creating a Listing Template
Once you have your custom post type set up and filled with data (the specials for the day, for instance), the next stage involves creating a listing template with Jet Engine. This template will be a single item template representing each special in the list.
The listing elements from Jet Engine are perfect for this job as they offer more capabilities than the standard Elementor Pro widgets, including text formatting and linking. Select the ‘Dynamic Field’ option from the listing elements and center align it. Then, style the typography to match your desired look.
Step 3: Displaying the Listing Template Dynamically
Finally, to replace the text area with the listing template, go to the widget selector and scroll down to find the ‘Listing Grid’ element from Jet Engine. Place this above the current text field. From the general settings, locate and select the listing template you created in the previous step.
Under the ‘Post Query’ settings, add a new query to filter the specials to be displayed on the correct dates. This can be achieved through a ‘meta query’ where the key name is the date. This way, only the specials for the current day will be displayed. To ensure the specials are displayed in the correct order, add another query based on the ‘order’ meta field you created.
Conclusion
With the right combination of Jet Engine and Elementor Pro, creating dynamic content becomes a breeze. By following these steps, you can turn your static chalkboard of daily specials into a dynamic content field that changes daily based on the information you enter. Remember to test and tweak the queries and settings as necessary to achieve the desired results. Stay tuned for more tutorials on Jet Engine and Elementor Pro!
