The Power of Crocoblock Listing Filters Demystified For Fantastic Layouts
How To Create Custom Post Types, Listings, and Filter Them.
That being said, it can get a little confusing at times, just trying to figure out how to do the things that seem to be simple.
Trying to filter your listing grid to display particular posts by itself can be a challenge.
Creating a Custom Post Type
If you’re new to WordPress, and or Elementor you may not be familiar with custom post types (CPT) just yet.
You will notice that in a basic install of WordPress, you are given one post type, appropriately called “Post.”
This gets challenging if you have a group of repeating objects that you want to create that have different meta fields than your standard posts.
This could be any type of listing from Real Estate to Job Posts, Garage Sale Items, Favorite Movies, or Games. Really your options are limitless.
For this example, I will create a post type that will serve as an Affiliate Product.
Once I’ve created this, I’ll be able to just add my custom meta fields that are only appropriate for my CPT and not my regular posts, which on this site are the tutorials, and for my new affiliate list, it’s the actual products.
I created a custom post type that I named “Custom Affiliate Product.” I probably should have made that shorter for the sake of my dashboard, but it will work.
To create a new JetEngine Post type, we will go to JetEngine > Post Types.
Inside my new CPT, Under advanced settings, I added in all of the default post elements that I wanted to carry over to my new CPT; Editor, Title, Page Attributes, Author, Custom Fields, Thumbnail, and Excerpt.
Then I added in all the custom meta fields that I thought I would need for this.
In this case, the added meta fields were: Amazon Title, Amazon Price, Amazon Link, Walmart Price, Walmart Link, Alternate Shop, Alternate Price, Alternate link.
I thought Amazon and Walmart would probably be the two most common affiliates, and then I could have a catch-all.
Again, this could be done with anything. If you’re creating custom posts like I’m doing over at rillaup.com, these could be things like; tagline, logo, gallery, main info, whatever you want in your custom post.
For a nice touch, I added in two Admin Columns, Aff Tax and Image. This will allow me to see my posts’ thumbnail and their Taxonomies in my post types list in the editor.
You can see what my posts look like in my dashboard since I added in the Admin Columns.
Creating a Custom Taxonomy
A Taxonomy is a similarity that ties multiple items together. Each Taxonomy will have a few potential types of that taxonomy (terms) that your posts could belong to.
For instance, if you had a CPT that featured all the animals in your local zoo. You could have a taxonomy of Zoo Animals called “group.” Your groups could include terms such as; Reptile, Mammal, Bird, Fish.
You could create a hierarchical category (or child) beneath those called “species,” and for mammals, you could have terms like; lions, giraffes, pandas, or gorillas.
You could have a custom post that featured Gary, the Giraffe with his profile, some pictures, date of birth, etc.
Gary would be a zoo animal in the group, a mammal, and a mammal called Giraffe.
For my example, I set up my items first into broad categories to initially sort the items.
This is probably the most common setup people have, with one or two taxonomies applied to a custom post type and possibly one hierarchical level deep.
For now, I’m only using one taxonomy, one level deep.
I named my taxonomy Affiliate Product Category.
JetEngine > Taxonomies
I will create my actual taxonomy terms for this category in the listings.
How to Create a Jet Listing
Once again we are going to go over to the JetEngine Menu.
This time we will go to JetEngine > Listings > Add New.
Now I want to set my type to post and choose the post type it will belong to. In our case, this is our Custom Post Type called Custom Affiliate Product.
After that, I just need to give it a name and save it, and it will take me to a page to start editing my new list item.
Once I’m on this page, I can start building out what I want my listing item to look like.
I will spare you the layout options and settings that I used, It’s just some basic sections and columns and design.
Adding Dynamic Terms
A critical part of this was using the Crocoblocks Dynamic Terms widget to display all of the terms.
This is the first time I’ve used this, and I’m very impressed.
You could also link to the terms from the regular Elementor Pro widgets, but the dynamic terms give me many more settings for layout and styling options, and control in the editor.
Create a Crocoblock Listing Grid
The actual listing widget has been added to this page below.
*side note, can I just say how much I hate that adobe took away the pixel arrow? But I digress.
This leaves us with the list below which includes four of my eight available listing items.
(I’m going to limit this to 4 just so I’m not overwhelming this post with what looks like actual affiliate ads)
Next will look at pre-filtering these.
Filter Listing Grid by Taxonomy Term
I made a few different terms for my products; Electronics, Books, Clothing, For Him, For Her, Gadgets, and Gifts.
For this example, if I wanted to have a page pre-sorted by term (category) that wasn’t auto-populated, this is how I could set that up. E.G. Books
Set my listing grid widget in place then;
Content > Posts Query > Add Item > Item #1 > Type Tax query > Taxonomy: Affiliate Product Category > IN > Name > whatever section I want.
Crocoblock gives you many ways to do this, but this seemed the easiest to do and understand. And, I think this is, in most cases, or at least your first.
This filters out just the books section, which you can see below.
The trickier part now is getting the auto-generated pages formatted with the right content layout when someone clicks on one of my terms in any of the listings.
Dynamic Filter Listing Grid by Taxonomy Term
Let’s make our category links clickable to go to their respective pages containing those items.
If you click on one of the terms above, you can see what the page looks like.
To start, we will need to go to our Elementor Pro theme builder and build a new archive page.
Inside that archive page, you will add your listing grid just like we did for this page above.
Then comes the critical step
The dynamic terms automatically link to a filtered view of posts, but when we add in our own listing grid for the look and feel, by default, it will pull in everything.
We need to tell it what we want.
Back in the editor, we will add the post tax query lookup just like before, except this time, instead of telling it the term we want to search for, we will use the Crocoblock macro, %queried_term%.
That will grab only the posts that are assigned to that term.
Finally, we need to save this custom archive page. When we save it, we will apply it to all the pages created by each of the terms.
That leaves us with all of the term filtered pages you get if you click one of the categories in the listings.
Adding Jet Filters
Now we’re going to add some on-page filtering for our archives using JetSmartFilters.
We will add a checkbox filter to allow users to choose product categories and a drop-down to sort by date.
Checkbox Category Filter
First, we want to add a check box to allow users to filter all of the different products.
We will start with our menu Smart Filters > Add New
Then we are going to;
- Name our filter
- Give it a label,
- Set our filter type to checkbox lists
- Data Source to Taxonomies
- Set Taxonomy to the one we want to filter by
- Relational Operator – Union
- Union means that if a person selects more than one checkbox, it will display any results in either of the checkboxes.
- Intersect means that if a person selects more than one checkbox, it will only display items in all of the checkboxes.
- Set Group terms by parents to “on.”
Now we will need to add this filter to our archive page. If we jump over to our archive template, we can drag in the checkbox filter widget.
Next, we will choose the taxonomy we want to filter by, then set this as a JetEngine filter, and I set the option to display the Filter title.
Now, we want to add a simple filter to sort our results from newest to oldest.
All we have to do is drag in the sorting filter widget exactly where we want.
Next, we will select our sorting field and then change the options inside of “Sorting List.”
We can X delete the options we don’t want and rename any that we do.
You also have the opportunity to add new sorting options if you want to sort by something like price.
You usually see the range filter in WooCommerce products.
In this case, we are not using actual Woo Prices. We are just calculating according to a custom post type filed.
First, we need to ensure that the field we want to sort price by is actually entered as a number, not text.
Then we’re going to go back over to create a new filter. We are going to call this one “price.”
We set our filter type to Range. We will need to put our own min and max range because we can’t grab it dynamically from WooCommerce since this isn’t an actual Woo Product.
Finally, we need to tell the range which query we want to search in.
In this case, I’m going to grab the amazon-price field that I set up earlier.
The next step is to drag our range filter widget into the desired location on our archive page and then adjust our styles.
Another widespread problem that comes up is how to get related posts to show up?
As an example, I will deviate from our affiliate listing grid and instead look at other tutorials’ side listings on this site.
I have related articles showing up on the right side of the page layout.
For this, we’re going to make use of two different Crocoblock macros.
We need to make sure that our template has two columns, so we can put our related topics into.
Next, we will drag our listing grid into the side section and set the columns to one.
Now, we want to set our results to only be related to the current page.
For that we will set Posts Query > Add Item > Item #1 > Tax Query
We will set the taxonomy to our current taxonomy. In this case, it’s merely Categories. (Tutorial Categories might have been a better name for clarity)
Then we want to set the terms from the meta field to %current_terms%.
This tells the grid to grab all items that have terms that match the current page we’re on.
Next, we want to tell the listing grid not to include or actually exclude the listing we’re currently viewing as a related item.
For that, we’re going to add another item and have this be a post filter. We will use the JetEngine macro %current_id%.
This gives us a filter for only certain listing items.
Final Thoughts - For Now
Is there a more complex situation you’re trying to pull off?
Tell me about it, and I’ll try to add it to this post.
Have a better way to do any of these things?
Let me know in the comments!