If you’re yet to join the Crocoblock world, you’re missing out on a tonne of plugins that could make your life 10x easier.
So what is Crocoblock? You might ask.
Crocoblock comprises a set of plugins that display custom posts in a dynamic structure. The perfect example of dynamic content is the WordPress “post” feature.
When you add a new post, to your blog, it automatically picks up a uniform design. Therefore, you can add as many posts, without the need to exclusively design each post uploaded.
So what happens when you need to display cars or houses exclusively, that are not in the traditional post format? This indeed becomes a problem. And this is where Crocoblock plugins come in handy.
With these plugins, you can create dynamic content with custom posts.
For example, if we have a real estate listing website, with features such as no. of bathrooms, no. of rooms, and location; we won’t have to repeat these features across all entries, but will only change the data. Makes sense?
Therefore, Crocoblock has made it their business to come up with a number of plugins to display different custom posts on your WordPress website.
If you’d ask me, I’d tell you that this is a million-dollar idea. I don’t know about you.
Anyway, the plugins include:
- Jet search
Could you just use Elementor pro?
Elementor pro does some good job of providing customized dynamic content. However, it’s just not enough.
If you’re looking for further detailed customization, you’ll need exclusive add-ons to improve your site’s user experience.
Elementor pro combined with Crocoblock plugins, however, will give you the ultimate design experience.
Let’s get started
Now that we are on the same page regarding Crocoblock, it’s time to create our site. In this tutorial, I intended to show you how to use JetsmartFilters to filter data, but then it was impossible to do that without an existing Listing website.
You’ll be happy to know that the Crocoblock plugins complement each other in every possible way, making the building process almost effortless.
Consequently, I saw it best to include a tutorial on how to build a real estate listing website with JetEngine, another Crocoblock plugin.
In the below tutorial, you’ll learn how to create a listing website with JetEngine. The sample that you’ll create from the tutorial, is what you’re going to use to add a filter functionality to your website. Sounds good? Let’s proceed.
Adding JetSmartFilters to your Listing website
As we proceed, I assume that you have managed to create your real estate website, and you have something similar to the picture below.
So, how do you add a custom filter functionality to your website?
This is where JetSmartFilters comes in. What you’ll love about this plugin, is that your users won’t have to reload pages, in order to filter content.
According to the previous tutorial, you created your custom property posts.
These property posts contain various data sets within them. These data sets such as price, location, sq ft, no. of rooms represent the various entries that you’ll use to filter data.
Create Custom Filters
With JetSmartFilters already installed, the next step is to start creating your custom filters.
To do this, click on “Add new” under Smart Filters. On this filter, we’ll create a select-type filter to represent the price type. Fill the fields according to the following entries:
- Title: Price type
- Filter Label: Price type
- Active Filter Label: Price type
- Filter type: choose “select”
- Is hierarchical: Off
- Data source: choose custom fields
- Custom Field key: price-variation
- Get choices from field data: On
- Field source plugin: JetEngine
- Placeholder: select
- Is checkbox Meta field(JetEngine): Off
- Query variable: price-variation
Kindly note: On the “Custom field key”, it should represent the name that you put under Price variation in the Property custom post.
Once you’re done with the entries, click on publish on the top-right side of the page.
Add a new filter with the title, “Price”. Input the rest of the fields according to the entries below:
- Filter label: Price
- Active filter label: Price
- Filter type: Choose “range”-represents the min and max value
- Values prefix: $
- Decimal separator: (dot)
- No. of decimals: leave the default
- Min value: leave the default
- Step: 100
- Get min/max dynamically: choose “Get from query meta key”
- Query variable: price (according to the name assigned on property post)
Then click on publish.
The next filter is the Category filter, which will filter custom posts according to categories. For you to display this, you should have the taxonomies under the jetEngine setup.
Add a new filter and fill the fields according to the entries below:
- Title: Category
- Filter label: Category
- Active filter label: Category
- Filter type: Choose “checkboxes list”
- Data source: Taxonomies
- Taxonomy: Property category (according to taxonomy under jetEngine)
Leave the rest to default. Click on publish.
We’ll now create the search location filter, that filters data according to location.
Add a new filter with the following entries:
- Title: Search location
- Filter label: Search location
- Active filter label: Search location
- Filter type: Search
- Placeholder: Search
- Search by: By Custom field (from query variable)
- Query variable: location (fill this according to the name assigned under location in property post)
Click on publish.
Create an archive template
We only have a normal properties page. It is possible to add filters to a page like this, however, it is not ideal. Therefore, it is necessary that we build an archive template.
Note: If the archive template and your Properties page have the same name, it will create some conflict. Make sure to edit the slug of the page, as shown below:
Under pages, click on “quick edit” under the Properties page, and change the name of the slug, then click on update.
Under JetEngine, “post types” make sure that the archive property is active. To do this, navigate to advanced settings and ensure that the “has archive” property is enabled.
To create our archive template, navigate to templates, and click on “theme builder”. Under archive, click on, “Add new archive”. Add your archive name and click on “Create template”.
You’ll be redirected to a new archive template page with Elementor. Since we already have the properties page, we do not need to create the archive template from scratch.
Therefore, we’re going to copy the sections from the properties page and paste them into our archive template.
Now that we’ve copied all the sections from the properties page, we’ll now add an extra column, to be the filter column.
Adding the Filter Column
To add a new column, click on the “Add new column” option under section settings as shown below:
Drag the new column to the left and change the width to 30%.
With the addition of a new column, the listings appear to be too compressed. Click on the edit listing, and change “columns no” to 2, as shown below:
Now click on the column settings, of the new column, and change the following:
- Background color: #019143c
- Padding: 25 (all sides)
Adding Filters created to Column
Now we’ll add the filters created to the new column.
When you type in “filter” at the Elementor search bar, all the filters created by JetSmartFilters will be displayed.
Now we’ll add a title as our first element, and name it “Price type”. (change color to white)
Under it, drag the “select box” filter. Type in your filter, which we had named “Price type”.
You should now have a title and a price type select box.
Drag another title and name it “Price”. Now drag the range filter under the title. Under “search filter” type in “price” and the range filter will display.
Drag a title and name it, Category. Under the title, drag the “checkboxes” filter, which filters according to category. Under “select filter” type in “category” and the categories should display.
Add a “Location” title. Under it drag the “search filter” filter. Under “select filter”, type in “search location”. On “this filter for” choose “JetEngine”. Under “apply type”, choose “AJAX on typing”. On “min number of letters” choose “1”.
Click on all the filters, and under “this filter for”, choose “JetEngine”. For this to work, this is a requirement.
Click on “publish”, and a “publish settings” popup will appear. We now need to add a condition, otherwise, the archive template will apply to all posts.
Click on “add condition” and select “properties archive” in the drop-down, then click on, “save & close”.
We’ll need to increase the no. of posts so as to display all the properties on the archive page.
To do this, click on the listing widget, and add the number of posts to appear(according to the total no. of your posts).
This ensures that all the posts appear when no filter has been applied.
In order to access the archive template, input your domain name/post slug type. To find your “post type slug”, navigate to “post types” under JetEngine and you’ll find your slug under the title, “post type slug”.
In our case, “properties” is our slug.
Add Archive Template to Menu
So, how do we add our archive template to the menu item?
To do this, go to appearance, and click on the menu option. Remove the previous properties page, as it doesn’t display the property posts.
On your left, you should see a properties tab, under menu items.
However, if you can’t see it, navigate to “screen options”, at the top of the page, and make sure that “Properties” is checked.
Now add, the “Properties” archive page to the menu items. Then click on “save menu”.
Now the properties post archive will be added as a menu item.
For just a $24, yearly subscription, you’re all good to integrate JetSmartFilters into your website and have 17 widgets included. Additionally, you can purchase the all-in-one Crocoblock package at a $130 yearly subscription.
Dynamic content is the new buzzword in web development. With constant improvement in web technology, users are more drawn to fast and interactive websites. And with plugins such as JetSmartFilters, you’re on your way to a world-class and modern dynamic website.
JetSmartFilters is just a branch in the Crocoblock tree. Look out for more content on Crocoblock. Will you?