Set Up a Custom Content Type Search Page with JetEngine & JetSmartFilters

Creating a custom content type search page in WordPress can be a nice addition, especially for websites with extensive directories or listings. This tutorial will guide you through setting up a CCT search page using JetEngine, JetSmartFilter, and Elementor. By the end of this guide, you’ll have a functional, user-friendly search feature for your website.

Prerequisites

Please make sure you have the following installed and activated:

• JetEngine
• JetSmartFilter
• Elementor

Set Up a Custom Content Type Search Page – Instructions

1. Create your CCT and set it up according to your needs (e.g. Lawyers Directory).
   
2. Navigate to JetEngine > Query Builder > Add New.
   
3. Set up your query settings and save the it afterward:
   1. Name: e.g. “Directory”
   2. Query Type: Custom Content Type Query
   3. From Content Type: e.g. Lawyers Directory
   4. Status: Publish
      
4. Navigate to JetSmartFilter > Add New.
5. Fill in the filter settings:
   1. Filter Name: e.g. “Search Lawyer CCT”
   2. Filter Type: Search
   3. Search by: By Custom Field (from Query Variable)
   4. Placeholder: e.g. “Type Lawyer Name…”
   5. Query Variable: e.g. “full_name”
      

      Tip: You can see the available query variables in your custom query preview.

6. Open your page in Elementor where you want to place the search page and insert the search filter widget.
   
7. Select the search filter widget and apply the following settings in the content tab:
   1. Select Filter: e.g. “Search Lawyer CCT”
   2. This filter for: JetEngine
   3. Apply type: Ajax
      
8. Add a listing grid widget on the page (in this example it is already designed).
   
9. Select the “Directory” query via Content > Custom Query.
   
10. Update the smart filter with your chosen field, for instance, switching from ‘full name’ to ‘office address’.

    

    

11. Test the functionality on your site by searching for various terms and confirming the accurate results.

Official Documentation

• JetEngine Documentation
• JetSmartFilter Documentation
• Elementor Documentation

Custom Content Type Search – Conclusion

Implementing a custom content type search on your website enhances user engagement and improves navigation. With JetEngine and JetSmartFilter, the process is streamlined, allowing for a powerful yet user-friendly search feature. Experiment with different fields and settings to tailor the search experience to your site’s specific needs.