How to Create Filters with JetSmartFilters Listing

Go to WordPress Dashboard > Smart Filters > Add New.

Name the filter; in our case, “Category Job.” 

Then, select the Filter Type. For example, we will build a “Select” filter to allow users to select one option from the list.

As for the Data Source, we pick the “Taxonomies” option and the custom “Vacancy Category” Taxonomy. Now, the filter will contain the taxonomy terms as options.

We leave the following settings to the default. 

Next, we scroll down to the Filter Labels section and complete it with the needed labels.

When the filter is ready, press the “Update” button.

Now, it’s time to build a listing. Check our JSF Listing Overview to find out more about the listings feature.

To do so, navigate to the WordPress Dashboard > Smart Filters > Listings dashboard.

Press the “Add New Listing” button.

Complete the listing’s name (here, “JSF Listing”) and adjust the Query settings.

For example, in the Content section, we change the PER PAGE number to “9” to show nine posts on the page.

Then, in the Posts section, we pick the “Jobs (Vacancies)” Custom Post Type (CPT) in the POST TYPES field to make it a source of the listing content.

In the next Layout section, we make no changes.

Moving to the following Item tab, select the Item that will become a template for the listing. As we haven’t built it yet, we should create a new one. 

However, before doing that, we should save the listing by clicking the “Save Listing” button.

Now, you can press the “Create new item” button to proceed to the item creation page.

First, we add a Listing Field block to the page.

As we want to display the post title, we leave the default settings.

Now, we want to adjust the style of the block, so we proceed to the Style tab.

Here, we select the TEXT COLOR of the block and configure the TYPOGRAPHY values.

After that, we add a Listing Terms block. 

In the Terms List tab, we set the “Vacancy Type” taxonomy as a source for the block content in the FROM TAXONOMY field.

We leave the Style settings at the default.

Next, we add a Listing Link block to the item.

As for the main Settings tab, we leave the field customization default.

However, we want to make the text underlined, so we go to the Style tab and enable the needed feature in the DECORATION section.

When the item is ready, click the “Save and Back to Listing” button to return to the listing editing.

In the Item tab, make sure to pick the item you have just built in the corresponding dropdown list.

Now, save the listing by clicking the same-named button.

Let’s add the built filter and listing to the page. We will create a new page, named “Jobs Page”, in the Elementor page builder. However, you are free to build a page in the Blocks editor or Bricks builder as well, as the JSF Listing block is also available there.

When the editor is opened, add a corresponding filter widget to the page. In our case, it’s the Select Filter widget.

In the Select filter dropdown list, choose the filter you previously built, and then assign the “JSF Listing” provider to this filter in the This filter for field.

Adjust other content and style settings if desired.

Now, add a JSF Listing widget to the page and select the Listing you want to display on this page.

When the page is ready, save the result.

If you work with the Block Editor, you can also place the JSF Listing inside a Flexible Container block.

This block serves as a wrapper, helping to structure and customize the layout.

Open the just-built page on the front end to check the result. You will observe both the filter and the listing on the page.

Select one of the options in the filter to see that the Listing is now filtered.