The tutorial by Crocoblock focuses on how to sort JetEngine listing grid using multiple meta fields with Elementor or Gutenberg. For instance, if you have a custom post type called “team”, which represents team members, each team member might have a name and a numeric value representing their years of experience. The goal is to sort these team members based on their years of experience and then by their names.
Requirements to Sort JetEngine Listing Grid
Before we start, ensure you have the following:
- JetEngine Custom Post Type created
- Created Listing
- Two meta fields created with JetEngine
- Gutenberg or Elementor editor
Creating a Custom Query
- Go to the Query Builder and click on “Add New”. Name your query (e.g., “team query”).
- Set the query type to “Post Query” because we’re working with a custom post type. For the post type, use “team”.
- Go to the “Meta Query” section and add a new meta query. We want to sort by experience first, so type in “experience” for the meta field name. Choose “Exists” for the comparison and leave the value field empty. Set the type to “Numeric” and give it a clause name (e.g., “experience_clause”).
- Add another meta query. This time, fill in the key with “name”, choose “Exists” for the comparison, and leave the value field empty. Set the type to “Character” and give it a clause name (e.g., “name_clause”).
- Go back to the “General” section and add new sorting parameters. For “Order By”, choose the clause you created (e.g., “experience_clause”). Add another sorting parameter for the secondary sort (e.g., “name_clause”).
Adding the Query to the Listing Grid
- Open the page you’re editing with Elementor.
- Select the “Listing Grid” and enable “Custom Query”. Select the query you created (e.g., “team query”).
- If you notice that the order is not as expected (e.g., you want a team member with a certain name to appear first), go back to the Query Builder and adjust the “Order” setting under the “Name Clause”.
- If you notice that not all posts are showing up, go to the “Post and Page” section in the Query Builder and adjust the “Post Per Page” setting to a higher number (e.g., 20).
Adding a Meta Query for Sorting by Reviews
- Go back to the Meta Query section in the Query Builder and add a new meta query for “review”. Select “Exists” for the comparison and leave the value field empty. Despite the temptation to select “Numeric” or “Decimal” for the type, select “Character” as it works best in this case. Give it a clause name (e.g., “review_clause”).
- Go back to the “General” section and add a new “Order By” parameter for the review clause. Set the order to “Highest”.
- Move the review clause to the top of the order by parameters. This will sort the list by reviews first.
Reversing the Order for Sorting by Experience
- If you want to reverse the order so that experience comes first, simply move the experience clause to the top of the order by parameters in the Query Builder.
- Update the query and refresh your page. Now, the list should be sorted by experience first, then by reviews, and finally by name.
Common Issues When Sorting JetEngine Listing Grid
While sorting the JetEngine listing grid, you may encounter a few common issues. Here are some of them and their solutions:
- Incorrect Order of Posts
If the posts are not appearing in the order you expect, it’s likely due to the settings in your custom query. Ensure that you have correctly set the “Order By” parameters in the Query Builder. Remember, the order of these parameters matters. The first parameter will be the primary sorting factor, the second will be the secondary sorting factor, and so on. - Not All Posts Are Showing Up
If not all posts are showing up in your listing grid, check the “Post Per Page” setting in the Query Builder. If this number is set too low, not all posts will be displayed. Increase this number to ensure all relevant posts are shown. - Meta Query Type Selection
When creating a meta query for reviews or other numeric values, you might be tempted to select “Numeric” or “Decimal” for the type. However, in many cases, selecting “Character” works best. If your sorting isn’t working as expected, try changing the type to “Character”. - Meta Field Does Not Exist
If you’re trying to sort by a meta field that doesn’t exist or is misspelled, the sorting won’t work. Double-check that the meta fields you’re using in your query match exactly with the meta fields in your custom post type.
Conclusion
By simply changing these clauses, you can customize the order of your listing grid however you want. This tutorial showed you how to sort by experience, reviews, and name, but you can apply the same principles to sort by any custom fields you have.