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.
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.
Step #3 – Enqueue Scripts
Create this file in the ajax folder:
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
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.
To view the full content, please sign up for the membership.
If You are already a member, please log in below: