How to Filter Posts by Taxonomy on Archive Page - P3 - Meta Box + Bricks

Building on the previous parts of this series, this tutorial shows you how to filter posts by custom taxonomy on an archive page using Meta Box and Bricks. By adding taxonomy-based filtering, you can help visitors narrow down listings and find relevant content more easily, whether they’re browsing blog posts, products, or events.

Video Version

Before Getting Started

First of all, I recommend using Meta Box AlO, which includes the framework and all extensions.

These are the extensions you may want to activate:

• MB Admin Columns: to add a column in the dashboard to display each hotel’s location. It is optional;
• MB Custom Post Type: to create a custom post type for hotels and a custom taxonomy for locations;
• Bicks: to create a template for the archive page, where you can add functionality to filter posts by taxonomy.

Let’s start now.

Create a New Custom Post Type and a Custom Taxonomy

Now, go to Meta Box > Post Types to create a new custom post type for the hotels.

After publishing, you’ll see the created custom post type in the menu dashboard.

Next, still in the Meta Box screen, create a new taxonomy for location information. In the Advanced tab, pay attention to this setting. It’s available when you activate the MB Admin Columns extension. When you check it, there’ll be a column in the dashboard to show the hotel’s location so that you can compare the results conveniently.

Move to the Post Types tab, and choose the Hotel to assign the custom taxonomy that we’ve created to that post type.

Now, in the post editor of the Hotel post type, we’ll see the taxonomy section, where we can enter the hotel location.

Just fill in all the information.

These are some created posts, for example. The location as well as the taxonomy is also displayed in the admin dashboard.

Note: I just entered a few sample locations as an example. In reality, you’ll probably have a large set of location data across multiple levels, such as countries, provinces, cities, or regions. That time, instead of adding them manually, you should import the data directly into the Location taxonomy to save time. You can use plugins to easily import data.

Create a Search Box for Searching Posts by Taxonomy

Before creating a search box, we need to make sure that the archive page can already display all the posts; I mean all the hotels.

Now, create a new page and edit it with Bricks.

First, to contain all the hotels' information, add a new section. Inside this section, get the title of the page, just choose the Post Title element.

In the Container element inside the section, select the div element to contain the hotel information. Then, to get the data of hotels, enable the Query loop button. And in the Query section, choose the type of data source.

To display the hotel’s image, choose the Image element. As the images are saved as featured image, choose the Dynamic data button and select the right one.

You can see all the hotel’s images are displayed already.

Now, add another div to cover the remaining hotel’s information. For the hotel’s name, choose the Post Title element again. It’s automatically gotten the title of all posts as well as the hotels’ names.

Next, select the Basic Text element to get the location. As the locations are saved in the taxonomies, we also use the Dynamic data button and choose the term correspondingly. Then, you see that the hotel’s location has just been obtained already.

After getting all the hotel information, we customize each element to style it in your own way. Now, the hotel listings look much better.

Let’s move on to creating the search box and adding its functionality.

Custom Filter for Searching Posts by Taxonomy

Back to edit the page with Bricks, let’s create the search box and filter options for the hotel listings.

First, add a Container element to cover the searching section. Bricks comes with built-in filter and search elements, making it easy to create dynamic search and filtering functionality. So, choose the Filter-Search element to do that.

Then, go to the Content tab and set the Target Query to Hotels. This ensures that the filter works with the hotel listing.

Next, enable Custom Search Criteria and Search Post Terms so the search can include taxonomy terms . After that, choose the taxonomy. This enables users to search for hotels by location.

We'll simply style the search box to make it more visually appealing. Now we have the search box with the automatic function. After entering a location, only the hotels in that location will be returned and displayed on the page.

In this way, you can create similar filters to search for hotels or posts by any criteria. You can apply it flexibly to create more filtering features for your website. Hope this tip is helpful for you!

Last Words

With Meta Box and Bricks, you can create flexible taxonomy filters to help visitors find relevant content more easily. By combining custom taxonomies with Bricks’ query and filtering capabilities, you can build a more dynamic and user-friendly browsing experience.

You may also find these tutorials helpful: how to create a simple listing, and how to filter posts by custom taxonomies in admin dashboard.

• How to Search Posts by Taxonomy on Archive Page - P1 - Using Meta Box
• How to Filter Posts by Taxonomy on Archive Page - P2 - MB Views
• How to Filter Posts by Taxonomy on Archive Page - P3 - Meta Box + Bricks