Real Estate Ajax Filter with Search and Dropdown Fields for WordPress

I kept thinking about my previous ajax filter projects and I was messing around with this over the weekend. If You are developing a WordPress website for a real estate company, this article might be useful. You can filter apartments and houses by 3 criteria: location, type and status.

I created an ajax filter component for a fictional real estate company. If You are a kind of developer like me, who like to avoid the plugin bloat, just implement it directly in your WordPress theme.

This is a developer level, so please buy membership only if you have a basic understand with WordPress template hierarchy, PHP, JavaScript, and Sass. Never experiment on a live website! I recommend to use LocalWP by Flywheel, that makes your work a lot easier.

Step #1 – The file structure should be look like this

Create the following empty files and folders in your theme:

your-theme/components/ajax/inc/ajax-callback.php
your-theme/components/ajax/inc/ajax-filter.php
your-theme/components/ajax/inc/post-types.php
your-theme/components/ajax/js/script.js
your-theme/components/ajax/real-estate.php
your-theme/front-page.php
your-theme/template-parts/content-filter.php
your-theme/template-parts/content-apartments.php

Step #2 – Define some constants in functions.php

This code will activate the ajax component.

functions.php

Step #3 – Enqueue Scripts

Create this file in the ajax folder:

real-estate.php

Step #4 – Create a Custom Post Type for Apartments

We are going to create two taxonomies for this post type

• Type: Apartment / House
• Status: For Sale / For Rent

post-types.php

Step #5 – Create the Custom Fields for Apartments Post Type

In this case I’m going to use the Advanced Custom Field plugin. Create these fields on your own, or You can download it as an importable template.

Step #6 – We have got the Apartment post type with the previously created custom fields

Just fill the posts with your own data, or download my content below.

Step #7 – Import the dummy content from this excel table

If You want to import my custom fields, You gonna need the WP All Import plugin.

To download the WP All Import Template file CLICK HERE.

Step #8 – Build the filter

Create this file in ajax/inc folder:

ajax-filter.php

Step #9 – Create a template file for the front page

Create this file in the root of your theme:

front-page.php

Step #10 – Create a template file for the filter

Create this file here: your-theme/template-parts/

content-filter.php

Step #11 – Create a template file for apartments

Create this file here: your-theme/template-parts/

content-apartments.php

Step #12 – jQuery

Create this file in ajax/js folder

script.js

Step #13 – SASS

Step #14 – Callback Function / PHP

Paste this code in functions.php

That’s It! I hope You can managed to get it work! If You have stucked, don’t hesitate to ask!

Related Projects

You may also be interested in the following projects

Dropdown Ajax Filter for WordPress Custom Post Type Taxonomy

Ajax Featured Premium

Multiple Dropdown Ajax Filter for WordPress Taxonomies

Ajax Featured Premium