This is a tutorial for creating a dynamic service list for your Custom Post Type (CPT) using JetEngine and Elementor, two powerful tools for WordPress website development. Moxet Khan will be replicating a feature similar to Airbnb’s amenities list, a feature that enhances user experience by providing detailed, interactive information about each property.
Steps to Create a Dynamic Service List
- Create a Taxonomy
Navigate to JetEngine and create a new taxonomy. For instance, you can name it “Services” and associate it with your post type, which could be “Properties”. - Add Meta Field for Icon
While creating the taxonomy, you can add a new meta field named “Icon”. Set the type to “Media” and keep the format as “Media ID”. - Add Services
Go to your post type (e.g., Properties) and find the “Services” taxonomy. Here, you can add different services along with their icons. For example, you can add “Wi-Fi” and upload an appropriate icon. - Assign Services to Properties
Open a property and on the right side, you’ll find “Services”. Here, you can select the services offered by the property. - Create a Listing
Go to JetEngine > Listings and create a new listing. Set the listing source to “Term” and select your term (e.g., “Services”). Design the listing as per your needs. - Insert the Listing in Single Property Page
Go to Templates > Theme Builder and edit the single post instance for your post type (e.g., “Properties”). Insert the listing you created in the desired location. - Create a Query
Go to JetEngine > Query Builder and create a new query. Name it (e.g., “Services Query”), set the type to “Term”, and select your term (e.g., “Services”). In the “Include” section, select “Include with Term ID”, choose “Current Terms”, and set the taxonomy to “Services”. - Apply the Query
Go back to your single property page in the Theme Builder and apply the custom query to the listing grid.
By following these steps, you can create a dynamic services list for your properties, which can be easily managed and filtered in the future.
Why You Should Use a Dynamic List
A Dynamic Service List allows you to display relevant information in a structured and visually appealing manner. Moreover, using taxonomies for this purpose provides better manageability and filterability in the future.
Use Cases for This Tutorial
- Real Estate Websites
Display amenities offered by different properties. - Hospital Websites
Showcase the specialties offered by different hospitals. - Service Provider Websites
List the services provided by the business.
Common Issues
- Services not appearing on the property page
Ensure that you have assigned the services to the property and that you have inserted the listing on the single property page. - Icons not displaying correctly
Make sure that you have uploaded the icons correctly while adding the services.
