How to create a custom list of posts with front-end filters

   Joe Lobo

How to

July 29, 2020
0

Sometimes the smallest additions to your websites can look the most impressive. One of those is when you add a front-end filter.

Not only is a front-end filter incredibly useful for anyone trying to find the content that matches their intent on your website, but with an AJAX filter, you can add that little bit of professionalism that will wow your customers. There are also many ways that you can filter your criteria – from the dropdown to checkboxes and more.

Below I’ll show you how you can use WordPress and its editor, Gutenberg, alongside Toolset Blocks to create a list of posts with a filter. I will also outline how easy it is for web designers to style their lists of posts without coding using these products.

First, let’s define exactly what I’m talking about.

What is a front-end filter?

A front-end filter is a set of dropdowns on the front-end which you can select to remove any unwanted results from the list of posts.

For example, on Toolset’s demo gym website (which you can access for free) there is a list of gyms with three filters on it so that you can narrow your results down.

One of those is a regular search so you can enter the name of the gym. Meanwhile, the other two are dropdowns so you can select the filters that match what you are looking for from the list.

Use a front-end filter to narrow down your list of searches.

Once you enter the filters and click Submit, the posts will update to reveal only those that match your requirements.

There are other types of filters you can add besides the search and dropdown:

  • Select multiple – A list from which you can select more than one option
  • Set of radio buttons – A list of buttons with the fields next to it. You can select which
  •  Set of checkboxes – Select the box to check from the list of fields

Before I go into how you can create a front-end filter for a custom list of posts, first I’ll show you the tools you’ll need to create them.

The tools you’ll need to create a custom list of posts with front-end filters

If you are a web designer who struggles to code then you will most likely need to use plugins to create your custom list of posts with front-end filters.

The first step is choosing which platform to create your websites on. The best option is WordPress which is used by more than 35% of websites. Its content editor, Gutenberg, offers blocks to build your website. You add blocks with different types of content and can rearrange them how you like.

However, blocks still has some limitations when it comes to adding custom features. This is where Toolset Blocks comes in. With Toolset Blocks, you can add complex features such as front-end filters in minutes and without coding.

Not only that, but Toolset Blocks also allows you to style your content without coding. We’ll go through this below.

How to create your custom list of posts with a front-end filter

Below I will outline the steps to take to add your list of posts and include a front-end filter. To see all the steps in more detail check out Toolset’s documentation on how to create a View. A View is what Toolset calls the list of posts you load from the database to the front-end.

I will show you how I created my example above of a custom list of gyms with a front-end filter.

1. Create your custom post type

First and foremost, you need to create the content which you will display and filter. The advantage of Toolset is that you can use it to create many of the most important website features including custom post types and custom fields. You will need both to create your content.

Below you can see how I created a custom post type called Gyms which now appears on the sidebar of my dashboard. This is where I will add all of my gyms content. 

When you create a post type it will appear on the WordPress dashboard sidebar.

2. Create your custom fields

You also need to create your custom fields which, along with the default fields from WordPress, will act as the structure for each post you add.

Below you can see the custom fields I’ve added which include an address, photo gallery, rating and much more. 

I’ve added these custom fields for my “Gym” post type.

Now that we have our structure in place we can just create new posts for our gyms and add the content.

When you create a new post all you need to do is fill in the fields and custom fields.

For a step by step guide on creating your content take a look at our documentation on setting up custom post types, fields and taxonomies.

3. Set up your list of posts (View)

Now that we have our content we can create a list with our posts for the front-end. You can add a list of posts anywhere you like – archives, pages or templates. If you are unsure about any of the terms below or steps make sure to check out the detailed guide to creating a custom search.

For this demonstration, I have added my list of posts to a page called “Find the best gym.” 

To start creating a list of posts you need to add Toolset’s own View block which will take you to a wizard so you can customize your list. This is important for creating a front-end filter as in the first step you need to check the Search toggle which allows you to add your filters.

As part of the wizard I have selected to include pagination and a search option.

You can also choose how to loop your list of posts, whether you want a grid, a list or unformatted amongst other styles.

In the next step you select the post type you want to load your content from. I select the “Gym” post type which I created before. 

I want to load content from my “Gyms” posts.

4. Add the blocks to your list of posts (View)

Now you can start adding your content to your list of posts by using the blocks provided by Gutenberg and Toolset.

For example, below I have added Toolset’s Image block. Note that this is not the default WordPress Image block because I want to include dynamic content which the WordPress block does not provide for. 

With dynamic content, you can ensure that each post in your list displays the correct content for that post.

I am adding Toolset’s own Image block rather than the default WordPress option.

To add the dynamic content I just need to select the source for the image which will be the gym photo field I created earlier when I added my custom fields.

I now have a list of images for my gyms posts.

Each of the images in my list comes from dynamic content.

I can add further blocks for other content such as the post title, rating and post content. Each of these will be dynamic just like the image.

5. Style the list of posts

One of the most important tasks for a designer, of course, is to make a website look good. Luckily, Toolset takes care of both the complex and simple by making it easy to style your content without coding.

Toolset offers a number of styling options including:

  • Color changes
  • Margin/padding
  • Border
  • Hover style
  • Font

And much more.

Below you can see how I styled my list of posts. On the right sidebar, you can find all of the styling options available to you. 

You can find many ways to style your content when you click on a block and look on the right sidebar.

6. Add your front-end filters

Now that your custom list of posts is ready you can insert your filters. Remember how we turned on the custom search toggle? This is where it comes in handy.

To add a filter click on Add Search Field and choose which of your fields you’d like to filter. For example, I created a custom field for my ratings. I can now add a filter for ratings so that a user can remove any gyms below a certain number of stars.

I have also included filters for “Gym name” and “Gym types.” With each filter, I can choose the type of filter I want – this is from the list mentioned at the start of the post.

Toolset allows you to insert different types of filters.

Another great option that Toolset provides is the ability to update your results automatically as soon as you add a filter, known as AJAX filters. 

Instead of clicking Submit, you will be able to see the results update immediately. All you need to do with Toolset is turn AJAX filters on.

It just takes one click to set up AJAX filters.

Now that you have everything ready, you can save the View and check it out on the front-end. Now users will be able to filter the posts using the search fields in seconds.

I can now filter my posts on the front-end.

Create your custom list of posts with front-end filters today!

Here are the steps to take so that you can start adding front-end filters to your custom list of posts today.

  1. Download Toolset 
  2. Check out one of our Toolset courses to learn all about adding front-end filters.
  3. Practice adding front-end filters and other features using one of Toolset’s free reference sites.
  4. When you are ready, install and register Toolset on your own website and get started!