Ajax

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.

[Read more…]

Ajax Filter with Images and Hover effect for WordPress CPT

View Demo Membership

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',

[Read more…]

Dropdown Ajax Filter for WordPress Custom Post Type Taxonomy

View Demo Youtube 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

[Read more…]

Dropdown Ajax Filter for WordPress Categories in Genesis

View Demo Youtube 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

[Read more…]

Receive data from external API (Chuck Norris jokes)

View Demo

Generate Chuck Norris jokes asynchronously from external API of Internet Chuck Norris Database.

https://api.icndb.com/jokes/random/

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css" />
  <link rel="icon" href="#">
  <title>Chuck Norris API</title>
  <style>
      .imgBx img{
          border-radius: 50%;
          display: block;
          margin: auto;
          max-width: 200px;
      }
      button{
          display: block;
          margin: 30px auto;
      }
      .text-center{
          text-align: center;
          margin-top: 20px;
      }
      form input{
          display: block;
          margin: auto;
      }
      form label{
          text-align: center;
      }
  </style>
</head>
<body>
    <div class="container">
        <div class="imgBx">
            <img src="norris.jpg" alt="Chuck Norris">
        </div>
        <div class="txtBx">
            <h1 class="text-center">Chuck Norris API</h1>
        </div>
        <form>
            <div>
                <label for="number">Number of jokes</label>
                <input type="number" id="number">
            </div>
        </form>
        <button id="button">Get Jokes</button>

        <ul class="jokes"></ul>
    </div>

  <script src="app.js"></script>
</body>
</html>

JavaScript

document.getElementById('button').addEventListener('click', getJokes);

function getJokes(e) {
    const number = document.querySelector('input[type="number"]').value;

    const xhr = new XMLHttpRequest();

    xhr.open('GET', `http://api.icndb.com/jokes/random/${number}`, true);

    xhr.onload = function(){
        if(this.status === 200){

            const response = JSON.parse(this.responseText);

            let output = '';

            if(response.type === 'success'){
                response.value.forEach(function(joke){
                    output += `
                        <li>${joke.joke}</li>
                    `;
                });

            } else{
                output += '<li>Something went wrong</li>';
            }

            document.querySelector('ul.jokes').innerHTML = output;
        }
    }
    xhr.send();

    e.preventDefault();
}

Receive data from JSON file with Ajax

View Demo

document.getElementById('button1').addEventListener('click', loadCustomer);
document.getElementById('button2').addEventListener('click', loadCustomers);

// Load Single Customer
// Create a function named LoadCustomer and passing the Event Object 
function loadCustomer(e){
    const xhr = new XMLHttpRequest();

    xhr.open('GET', 'customer.json', true);

    xhr.onreadystatechange = function(){

        if(this.readyState === 4 && this.status === 200){

            const customer = JSON.parse(this.responseText);

            const output = `
                <ul>
                    <li>ID: ${customer.id}</li>
                    <li>Name: ${customer.name}</li>
                    <li>Company: ${customer.company}</li>
                    <li>Phone: ${customer.phone}</li>
                </ul>
            `;

            document.getElementById('customer').innerHTML = output;
        }
    }

    xhr.send();

    e.preventDefault();
}

// Load Customers
function loadCustomers(e){
    const xhr = new XMLHttpRequest();

    xhr.open('GET', 'customers.json', true);

    xhr.onreadystatechange = function(){

        if(this.readyState === 4 && this.status === 200){

            const customers = JSON.parse(this.responseText);

            let output = '';

            // We can't just output the data, we need to loop through

            customers.forEach(function(customer)  {

                output += `
                <ul>
                    <li>ID: ${customer.id}</li>
                    <li>Name: ${customer.name}</li>
                    <li>Company: ${customer.company}</li>
                    <li>Phone: ${customer.phone}</li>
                </ul>
            `;  
            });

            document.getElementById('customers').innerHTML = output;
        }
    }

    xhr.send();

    e.preventDefault();
}

Multiple Dropdown Ajax Filter for WordPress Taxonomies

View Demo Youtube 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

[Read more…]

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

Step #3 – Create some posts in FAQ

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' 
#27 'post_type' => 'YOUR_POST_TYPE',

Real Estate Ajax Filter with Search and Dropdown Fields for WordPress

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

Step #2 – Define some constants in functions.php

Step #3 – Enqueue Scripts

Step #4 – Create a Custom Post Type for Apartments

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

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

Ajax Filter with Images and Hover effect for WordPress CPT

Step #1 – Create a Custom Post Type for Cities

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

Step #3 – Add some posts in City

Step #4 – Enqueue scripts in functions.php

Step #5 – Build the filter

Dropdown Ajax Filter for WordPress Custom Post Type Taxonomy

Step #1 – Filter by taxonomy terms

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

Dropdown Ajax Filter for WordPress Categories in Genesis

Step #1 – Filter posts by category

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

Receive data from external API (Chuck Norris jokes)

HTML

JavaScript

Receive data from JSON file with Ajax

Multiple Dropdown Ajax Filter for WordPress Taxonomies

Step #1 – Filter by taxonomy terms

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

AJAX Filter for WordPress Custom Post Type Taxonomy with Buttons

Step #1 – Create a Custom Post Type for FAQ

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

Step #3 – Create some posts in FAQ

Step #4 – Enqueue scripts in functions.php

Step #5 – Build the filter

AJAX Filter for WordPress Categories with Buttons in Genesis

Step #1 – Enqueue scripts in functions.php