How to Create Filters for Real Estate Page - Meta Box + Bricks

If you're building a real estate website and want users to easily filter properties by type, price, area, year built, or status, this blog is for you. I’ll walk you through how to create a professional-looking property listing using Meta Box and Bricks Builder, with filters displayed neatly in the sidebar and results updating instantly based on user selections.

This method isn’t just for properties; it also works great for other types of content like products, job listings, or services where users need to filter by specific criteria.

It’s quite similar to our previous job listing tutorial. We’ll still use custom fields and a custom post type to store the property data. But this time, we’ll take advantage of the built-in features of Bricks to handle the filtering in a more visual and streamlined way.

Let’s get started!

Video Version

Before Getting Started

In this tutorial, I’ll show you how to create a custom post type and custom fields for property listings with Meta Box, then use Bricks to build a dynamic layout with a real-time filter in the sidebar.

To make the setup smoother, first of all, I recommend using the free version - Meta Box Lite. You can download it directly from our website. With just this version, you’ll have the framework along with all free extensions to cover the essential features.

These are the extensions you may want to activate.

• MB Custom Post Type: to create a custom post type for the properties and custom taxonomy for its type.
• MB Builder: to visually create custom fields for storing property details like price, area, location, status, and more. You can test the new interface of MB Builder here.

Finally, Bricks is used to build the layout and create a real-time filtering system using query loops and dynamic data.

Now, let’s go step by step.

Create a Custom Post Type

As we said before, we’ll begin by creating a custom post type to store property listings, and the information of each one will be saved as a post of that post type.

Right on the Meta Box dashboard, click on the Create post type button to create a new one.

After publishing, it will appear in your dashboard menu.

Create a Custom Taxonomy

Before diving in, keep in mind that whether you use a custom taxonomy or custom fields depends on how you want to structure and filter your content. You can choose either one or both; it’s totally up to you. In this case, I’ll use both for more flexibility.

Now, I’ll create a custom taxonomy for the created post type to categorize properties by their types.

Still in the Meta Box screen, create a new taxonomy.

In the Advanced tab, pay attention to the Show admin column setting if you want to show them as an admin column. This setting is available when you have the MB Admin Columns extension. I did not mention it at the beginning because it’s optional.

Move to the Post types tab, choose the Property to assign the custom taxonomy that we’ve created to that post type.

Now, you can add some terms to your product’s taxonomy.

Create Custom Fields for the Property

To store property details, we need to create a group of custom fields. They will cover key information such as property price, area, status, and more. Feel free to add additional fields depending on your needs.

Click on the Create custom fields button in the dashboard to create a new field group for the property.

These are some fields I created:

There’s no special setting for them. You can freely create more fields to store information for products as you want with 40+ field types provided by Meta Box.

For fields that require a selection, such as Status, I use the Select field type. In the Choices section, I enter the available options, like For sale or For rent.

Once all fields are configured, move to the Settings tab, set the Location as Post type, and select Property to assign these fields to it.

Now, navigate to your post editor, you’ll see the custom fields displayed, along with the taxonomy section where you can enter the property type.

So, just fill in all the information.

These are some posts, for example, that I created. The property type as well as the taxonomy terms also display in the admin dashboard.

Show Properties on the Page

In this step, we’ll display posts on the page - that means all the properties. For filtering, I’ll do it later.

First, create a new page for the property listing.

Let’s edit the page with Bricks.

Add a Section element to cover all the page content, then use the available container to insert elements for displaying the property list.

Before going further, add a Heading element for the page title, then click the Dynamic Data icon, choose the Post title option from the list. This will automatically display the title of the current page on the frontend.

Move to the container and choose the layout for it. In my case, I’ll use a 2-column layout: one for the filtering and one for the properties.

You can adjust the width of the two columns as you prefer.

Now, get the properties information into column 2.

We want to display all Property posts, so we need to use a query loop. To do that, add a Div as the wrapper and enable the Query loop button > the Query section > choose the created post type you want to get data from.

Inside this div, add elements to display the property details.

For the image of the property, choose the element that has the same name. Since these are the post’s featured images, click the Dynamic Data icon and choose the Featured Image option.

As you can see, the image is displayed in the preview.

Next, add another Div to group some property data together - this will help with styling. Then, choose the Post Title element for the property name.

To get its status, choose the Basic Text element. As this kind of information is saved in the custom field of Meta Box, use the Dynamic data button. Then, look for the field where we store the status.

Do similar to get the property’s location and type.

Afterward, I want to display the property area, number of bedrooms, and number of bathrooms along with icons, so choose the Icon List element instead of normal text.

You can style and pick icons as you like. As this info is saved in custom fields created with Meta Box as well, in the Label section, we’ll use the Dynamic Data and then choose the corresponding fields. For instance, I am getting the area.

You can add the right unit. Repeat for bedrooms and bathrooms.

Finally, for the price, do the same with other data.

All the information for the property is now in place.

View the page on the frontend, the property list is showing up. However, it’s still quite basic, so let’s make it more visually appealing.

To style it, choose each element and change its settings. Then, the property listings look much better.

It's time to add and set up the filtering functionality.

Add Filter Functionality for the Real Estate Page

Let’s add some filter functionality so users can search for properties based on type, price, area, construction date, and status. With Bricks, filtering has never been easier – it supports filtering by taxonomy and even works perfectly with Meta Box custom fields. Let’s set things up!

In the Bricks settings, enable two options to activate filtering.

Then, edit the property page again.

Name the div that wraps your property query - this helps you connect filters later, especially useful if the page has multiple queries. The other divs for styling don’t need names.

Now, add a new div inside the first column to cover all the filters; this will make styling easier later.

You’ll see Bricks supports many filter types, as you can see here:

Start creating a search filter. In the Target query section, choose the query you created earlier. From now on, the search box will filter results based on that query.

For other filters, the structure is the same:

• Add a title
• Choose the right filter element and connect it to the target query.

For the property type, choose the filter element you prefer. I’ll go with Filter – Checkbox, since users may want to select multiple types, and checkboxes are perfect for that. Next, connect this filter to the target query. As the property type is saved in the taxonomy, in the Source section, choose the corresponding taxonomy. Then, you see the type filter section shows as a checkbox list based on the filter element you chose.

For the next filters, follow the concept I mentioned earlier. Add a wanted filter for price (Ex: Filter - Range). Connect it to the query as well. Since price is stored in a Meta Box custom field, choose Custom Field as the source, then select Meta Box and choose the correct field via Dynamic Data.

The price filter appears; you can adjust the currency and range display.

You can adjust the currency and range display.

Do the same with the remaining filters.

Next, add a Reset Filter element; this clears all selected filters and restores the default view. You can set its action and style it.

The last one is for showing active filters, which displays which filters are currently applied.

Now all the filters are visible on the frontend.

Go back to the editor and style the filter section to make it look better. Thus, let’s give it a try; it works perfectly! The filters you choose will be listed below the active filters section, and the properties shown will satisfy those conditions.

Last Words

That’s it! Now you’ve got a real estate listing page with dynamic filters built with Meta Box and Bricks – fast, flexible, and easy to maintain. With this setup, users can quickly narrow down properties based on what they care about most.

If you're interested in more ways to use filters with Meta Box, don’t miss out on our other tutorials. We’ve covered filtering in various builders and contexts, from job listings to product pages, each one tailored to help you create more powerful, user-friendly sites. Thanks for reading!