• Skip to main content
  • Skip to primary sidebar

WordPress, Genesis Framework and Storefront customization tutorials

  • Archive
    • Free
    • Premium
  • Blog
  • About
  • Contact
  • Newsletter
  • Membership
  • Login
Home » Premium » Featured

Featured

Real Estate Ajax Filter with Search and Dropdown Fields for WordPress

View DemoYoutube VideoMembership

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.

Custom Fields for Apartments

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:

 
 
Forgot Password

Filed Under: Featured, Premium Tagged With: Ajax

Ajax Filter with Images and Hover effect for WordPress CPT

View DemoMembership

In this project we are going to create an Ajax filter from WordPress Custom Post Type, that displays images with fancy hover effects. You can filter posts without refreshing the page. I didn't use either a page builder or a plugin to create this feature.

Step #1 - Create a Custom Post Type for Cities

In this example I'm going to create a Custom Post Type named City, but it could be anything You want. Please care about the taxonomy's slug in this case "city_cat". You need to change it to Your custom slug.

Add this snippet to functions.php

your-child-theme/functions.php



Step #2 - Create some Taxonomies for City Custom Post Type

Step #3 - Add some posts in City

You can download the XML file from the demo to import.

Step #4 - Enqueue scripts in functions.php



Step #5 - Build the filter

Create a file named filter.php

your-child-theme/ajax/filter.php

Find and replace the taxonomy and post type:

#6  'taxonomy' => 'YOUR_TAXONOMY' 
#28 'post_type' => 'YOUR_POST_TYPE',

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

Filed Under: Featured, Premium Tagged With: Ajax

Isotope Gallery from WordPress Featured Images

View DemoYoutube Video

In this project I created a WordPress gallery from Custom Post Type’s featured images using Isotope filter combined with lightGallery.

With Isotope You can filter items like portfolio, gallery images or any kind of HTML elements.

lightGallery displays images in Lightbox in a very fancy way with captions and paginations. During WordPress development, I strive to use as few plugins as possible. So I implemented these features directly in my child theme. I prefer Genesis Framework, but it can be used in any WordPress Theme.

Step #1 - Create a Custom Post Type

Create a Custom Post Type called Gallery and upload some images from Pixabay. 



Step #2 - Upload Images

You can upload your own images, but if You want to use that pictures that I used, click here to download the demo file.

Every post has a featured image we’re going to sort them by category and display the title dynamically in the gallery.

Step #3 - Build the filter

To Loop through the categories and echo out as buttons create a file named templates/filter.php and paste the following code in it:

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

Filed Under: Featured, Premium Tagged With: Isotope

Dropdown Ajax Filter for WordPress Custom Post Type Taxonomy

View DemoYoutube Video

In this tutorial I'm going to show You how to create a dropdown filter with AJAX for WordPress Categories.

Step #1 - Filter by taxonomy terms

Create a file named dropdown-filter.php

/your-child-theme/ajax-dropdown/dropdown-filter.php

Position of your WordPress Custom Post Type's Taxonomy

Search and replace "YOUR_TAXONOMY" and "YOUR_POST_TYPE" in following the code!

#3  'taxonomy' => 'YOUR_TAXONOMY' 
#20 'post_type' => 'YOUR_POST_TYPE', 



Step #2 - Create a shortcode and place it wherever You want

Just copy this code in the functions.php



To view the full content, please sign up for the membership.

If You are already a member, please log in below:

Filed Under: Featured, Premium Tagged With: Ajax

Dropdown Ajax Filter for WordPress Categories in Genesis

View DemoYoutube Video

In this tutorial I'm going to show You how to create a dropdown filter with AJAX for WordPress Categories.

Step #1 - Filter posts by category

Create a file named dropdown-filter.php

/your-child-theme/ajax-dropdown/dropdown-filter.php

If You want to filter by default WordPress Posts by Categories, the following lines must be look like this

#3  'taxonomy' => 'category'
#20 'post_type' => 'post',



Step #2 - Create a shortcode and place it wherever You want

Just copy this code in the functions.php



To view the full content, please sign up for the membership.

If You are already a member, please log in below:

Filed Under: Featured, Premium Tagged With: Ajax

Isotope Filter with Multiple Dropdown for WordPress Categories

View DemoYoutube Video

In this tutorial we are going to build an Isotope Filter for WordPress Categories with multiple dropdown select options. The following project is actually a fictive job listing website with Bootstrap grid for responsive layout and Genesis Framework. But it works with any kind of WordPress theme.

Recommendations:

  • Please don't experiment on a live website, but if You do make sure that You have access to FTP
  • I suggest to use LocalWP by Flywheel to setup easily a localhost with WordPress

Step #1 - Create the Custom Post Type named Jobs

Add this to functions.php



Create Taxonomy for Stack of the Job

Add this to functions.php



Create Taxonomy for City of the Job

Add this to functions.php



Step #2 - Add some dummy content

Let' go ahead and upload your own content with different taxonomies, or You can import the demo that I used in the example above.

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

Filed Under: Featured, Premium Tagged With: Isotope

Isotope Filter with Single Dropdown for WordPress Categories

View DemoYoutube Video

In this tutorial we are going to build an Isotope Filter for WordPress Categories with single dropdown select options. The following project is actually a fictive job listing website with Bootstrap grid for responsive layout and Genesis Framework. But it works with any kind of WordPress theme.

Recommendations:

  • Please don't experiment on a live website, but if You do make sure that You have access to FTP
  • I suggest to use LocalWP by Flywheel to setup easily a localhost with WordPress

Step #1 - Create the Custom Post Type named Jobs

Add this to functions.php



Create Taxonomy for Stack of the Job

Add this to functions.php



Step #2 - Add some dummy content

Let' go ahead and upload your own content with different taxonomies, or You can import the demo that I used in the example above.

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

Filed Under: Featured, Premium Tagged With: Isotope

Isotope Filter in Genesis with Buttons for WordPress Categories

View DemoYoutube Video

In this tutorial we are going to build an Isotope Filter for WordPress Categories with buttons. The following project is actually a fictive job listing website with Bootstrap grid for responsive layout and Genesis Framework, but it works with any kind of WordPress theme.

Recommendations:

  • Please don't experiment on a live website, but if You do make sure that You have access to FTP
  • I suggest to use LocalWP by Flywheel to setup easily a localhost with WordPress

Step #1 - Create the Custom Post Type named Jobs

Add this to functions.php



Create Taxonomy for Stack of the Job

Add this to functions.php



Create Taxonomy for City of the Job

Add this to functions.php



Step #2 - Add some dummy content

Let' go ahead and upload your own content with different taxonomies, or You can import the demo that I used in the example above.

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

Filed Under: Featured, Premium Tagged With: Isotope

Isotope Filter with Search Field for WordPress Categories

View DemoYoutube Video

In this tutorial we are going to build an Isotope Filter for WordPress Categories using Search Filed and live reload without refresh the browser. The following project is actually a fictive job listing website with Bootstrap grid for responsive layout and Genesis Framework, but it works with any kind of WordPress theme.

Recommendations:

  • Please don't experiment on a live website, but if You do make sure that You have access to FTP
  • I suggest to use LocalWP by Flywheel to setup easily a localhost with WordPress

Step #1 - Create the Custom Post Type named Jobs

Add this to functions.php



Create Taxonomy for Stack of the Job

Add this to functions.php



Create Taxonomy for City of the Job

Add this to functions.php



Step #2 - Add some dummy content

Let' go ahead and upload your own content with different taxonomies, or You can import the demo that I used in the example above.

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

Filed Under: Featured, Premium Tagged With: Isotope

Multiple Dropdown Ajax Filter for WordPress Taxonomies

View DemoYoutube Video

In this tutorial I’m going to show You how to create multiple dropdown filter with AJAX for WordPress Taxonomies. AJAX allows to update parts of the website, without reloading the whole page. Web pages going to be updated asynchronously by exchanging data with a web server behind the scenes.


Step #1 – Filter by taxonomy terms

Create a folder named ajax in your child theme.
Create a file named dropdown-filter.php in the ajax folder.



Step #2 – Create a shortcode and place it wherever You want

Just copy this code in the functions.php



To view the full content, please sign up for the membership.

If You are already a member, please log in below:

Filed Under: Featured, Premium Tagged With: Ajax

AJAX Filter for WordPress Custom Post Type Taxonomy with Buttons

View Demo

Step #1 - Create a Custom Post Type for FAQ

In this example I'm going to create a Custom Post Type named FAQ, but it could be anything You want. Please care about the taxonomy's slug in this case "faq_cat". You need to change it to Your custom slug.

Copy this code in functions.php



Step #2 - Create some taxonomies for FAQ Custom Post Type

Create some taxonomies

Step #3 - Create some posts in FAQ

You can download the XML file from the demo to import.

Create some posts in FAQ

Step #4 - Enqueue scripts in functions.php



Step #5 - Build the filter

Create a file named filter.php

your-child-theme/ajax/filter.php

Find and replace the taxonomy and post type:

#6  'taxonomy' => 'YOUR_TAXONOMY' 
#27 'post_type' => 'YOUR_POST_TYPE',

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

Filed Under: Featured, Premium Tagged With: Ajax

AJAX Filter for WordPress Categories with Buttons in Genesis

View Demo

Step #1 - Enqueue scripts in functions.php



To view the full content, please sign up for the membership.

If You are already a member, please log in below:

Filed Under: Featured, Premium Tagged With: Ajax

Primary Sidebar

Gabor Flamich

Hi! I'm Gabor.
I write tutorials on WordPress and WooCommerce.

MacBook

12 Essential Snippets for Genesis Developers

Subscribe to my Newsletter to view my basic collection of Genesis snippets that I use for my projects!

Sign Up for Free
  • Facebook
  • GitHub
  • Instagram
  • LinkedIn
  • Twitter
  • YouTube
UpdraftPlus Premium

Tags

ACF Ajax Analytics API Bootstrap Breadcrumb category CPT CSS fetch Genesis Google Maps Gutenberg HTML Isotope JavaScript jQuery loop Map Menu Parallax PHP SASS SEO SQL Storefront SVG tab tag manager tags Taxonomy Tool upsell Webpack Wholesale WooCommerce WordPress WPML

Disclosure: Some of the links in this site are affiliate links. I will be paid a commission if you use this link to make a purchase.

  • Privacy Policy / Terms of Service
© 2023 WP Flames - All Right Reserved