How to create a custom post filter using AJAX in WordPress?

In this article we will show you how to load custom posts easily and quickly using AJAX in WordPress.

The task will be to create a filter for project types, which will allow us to load a list of projects with the selected type.

WordPress – how to create AJAX filter?

What you need to know

1. First of all you need to know the builder’s page WPBakery on which we base our website construction. In our previous guides you will find all the knowledge you need to understand the process of creating widgets for WPBakery.
  Link to the article: REDO JSComposer Additional – plugin adding widget to WPBakery.
  Link to WPBakery plugin: https://wpbakery.com/
2. If you don’t know WPBaker you will need to know another builder’s page – Elementor. This is one of the best known plugins for creating web pages in WordPress. To understand how our plugin for creating widgets for Elementor works – see article: Elementor – how to create your own custom post plugin
  Link to Elementor plugin: https://elementor.com/
3. If you are unfamiliar with AJAX in WordPress – read this article and try to make an example from the article yourself: AJAX in WordPress – complete guide
4. We rely on the basic programming skills of PHP, and the ability to create code HTML and CSS. If you have read our previous guides, creating a slider shouldn’t be difficult.
  Link to the list of previous articles: Articles.

We create a structure to load the AJAX list

We will start by creating an html structure, into which we will load a list of custom posts. We will use the WPBakery Page Builder for this.

We will use ready-made custom post type “Projects” and create AJAX function, which will load list of projects of this type. Project type will be stored in taxonomy “Project type”. If you don’t know how to add custom post type taxonomy I refer to the article: How to add custom taxonomy (Custom Post Type UI)

In the target page, where the list of projects is to be displayed, we create a structure:

Filter-container
- Types-container
- Projects-container

Eventually we will load a list of project types into Types-container using AJAX with a default setting to display all projects in Projects-container. After clicking on a given project type the list of projects will be “filtered” and only projects of this type will be displayed.

In WPBakery the structure should look like this:

AJAX script loading custom posts WordPress

We create an AJAX script using jQuery in WordPress theme

We move on to creating the JS script. In the folder of our theme we search for the js folder and in it we create a .js file where we will place our script. In our case it will be redo-script.js.

You will need a jQuery biobook for the script to work properly – make sure your theme has it.

The main function that allows us to use AJAX is: $.post(), which sends data to the server using HTTP POST Request. Inside you should put url, which contains admin-ajax.php (in WordPress this file is responsible for data transfer using ajax). The correct url will be placed in the $ajaxurl and send it accordingly later in functions.php.

$.post(
            ajaxurl,{},
            function( response ) {}
);

$.post(

ajaxurl,{},

function( response ) {}

);

Then we need to specify which php script we want to use to download the list of projects. This script will be created in the file functions.php of our theme – we will call it: get_projects(). Additionally we have to specify what type of project we want to download. Since this is the initial script that reads the list of projects, we want to download all project types. The variable that stores the project type is $projectType.

$.post(
            ajaxurl,
            {
                'action' : 'get_projects',
                'projectType' : 'wszystkie'
            },
            function( response ) {}
);

$.post(

ajaxurl,

{

'action' : 'get_projects',

'projectType' : 'wszystkie'

function( response ) {}

);

When we executed our script on the server side, we received a response, which is in JSON format. We need to convert the response using the built-in parseJSON() and then put it into the appropriate containers on our site. We put our projects into a previously created container – projects-container.

(function($){
    $(document).ready(function(){
        $.post(
            ajaxurl,
            {
                'action' : 'get_projects',
                'projectType' : 'wszystkie'
            },
            function( response ) {
                $data=$.parseJSON(response);
                $('.projects-container').html($data[0]);
            }
        );
    });
})(jQuery);

(function($){

$(document).ready(function(){

$.post(

ajaxurl,

{

'action' : 'get_projects',

'projectType' : 'wszystkie'

function( response ) {

$data=$.parseJSON(response);

$('.projects-container').html($data[0]);

}

);

});

})(jQuery);

The selection of the type of project should still be handled. We assume that each project type will have a class .project-type, and the project type currently selected will additionally have a class .type-active. The project types will be in the .types-container. When you click on a project type, check where the class .type-active is located in our container and remove it from the previous location and then add it to the new one.

 $(document).on('click', ".project-type" ,function(){
           $('.projects-types').find('.type-active').removeClass('type-active');
            $(this).addClass('type-active');
});

$(document).on('click', ".project-type" ,function(){

$('.projects-types').find('.type-active').removeClass('type-active');

$(this).addClass('type-active');

});

After adding an active class for our current project type, use $.post() to select the current project type. We parse the answer with JSON and then “put” it into our project container.

 $.post(
                ajaxurl,
                {
                     'action' : 'get_projects',
                     'projectType' : $(this).data("projectType")
                },
                function( response ) {
                    $data=$.parseJSON(response);
                    $('.projects-container').html($data[0]);
                }
            );

$.post(

ajaxurl,

{

'action' : 'get_projects',

'projectType' : $(this).data("projectType")

function( response ) {

$data=$.parseJSON(response);

$('.projects-container').html($data[0]);

}

);

The whole of our redo-script.js:

(function($){
    $(document).ready(function()
{
        $.post(
            ajaxurl,
            {
                'action' : 'get_projects',
                'projectType' : 'wszystkie'
            },
            function( response ) {
                $data=$.parseJSON(response);
                $('.projects-container').html($data[0]);
                $('.projects-types').html($data[1]);
            }
        );
        $(document).on('click', ".project-type" ,function(){
           $('.projects-types').find('.type-active').removeClass('type-active');
            $(this).addClass('type-active');
            $.post(
                ajaxurl,
                {
                     'action' : 'get_projects',
                     'projectType' : $(this).data("projectType")
                },
                function( response ) {
                    $data=$.parseJSON(response);
                    $('.projects-container').html($data[0]);
                }
            );
           
        });
    });
})(jQuery);

(function($){

$(document).ready(function()

{

$.post(

ajaxurl,

{

'action' : 'get_projects',

'projectType' : 'wszystkie'

function( response ) {

$data=$.parseJSON(response);

$('.projects-container').html($data[0]);

$('.projects-types').html($data[1]);

}

);

$(document).on('click', ".project-type" ,function(){

$('.projects-types').find('.type-active').removeClass('type-active');

$(this).addClass('type-active');

$.post(

ajaxurl,

{

'action' : 'get_projects',

'projectType' : $(this).data("projectType")

function( response ) {

$data=$.parseJSON(response);

$('.projects-container').html($data[0]);

}

);

});

})(jQuery);

Server-side script – how to handle AJAX in WordPress

AJAX function support is programmed in file functions.php. The first step is to register our JS script – redo-script.js, and set ajaxurl. So we will create a function add_js_scripts_redo() where we will add our script and fix ajaxurl.

function add_js_scripts_redo() {
        wp_enqueue_script( 'redoscript', get_template_directory_uri().'/js/redo-script.js', array('jquery'), 1, 1, 1 );

		if ( isset($_SERVER['HTTPS']) )  
       	$protocol = 'https://';  
   		 else  
       	$protocol = 'http://';  
		   
        // pass Ajax Url to script.js
        wp_localize_script('redoscript', 'ajaxurl' , admin_url( 'admin-ajax.php', $protocol ) );
    }
    add_action('wp_enqueue_scripts', 'add_js_scripts_redo');

function add_js_scripts_redo() {

wp_enqueue_script( 'redoscript', get_template_directory_uri().'/js/redo-script.js', array('jquery'), 1, 1, 1 );

if ( isset($_SERVER['HTTPS']) )

$protocol = 'https://';

else

$protocol = 'http://';

// pass Ajax Url to script.js

wp_localize_script('redoscript', 'ajaxurl' , admin_url( 'admin-ajax.php', $protocol ) );

}

add_action('wp_enqueue_scripts', 'add_js_scripts_redo');

Now create the function we defined in the JS script – get_projects().

The first step in get_projects() is to download the $projectType, which was sent by $. post().

function get_projects() {
$param = $_POST['projectType'];
}

function get_projects() {

$param = $_POST['projectType'];

}

Now we move on to checking the parameter. If the variable $param == ‘all’ – then we download the whole list of projects regardless of the project type. If not, we check the project type that contains the projectType sent. We assume that the sent projectType will contain the project type ID.

function get_projects() {
$param = $_POST['projectType'];
		if($param == 'wszystkie') {
			$projectsQuery = new WP_Query(array( 
				'post_type' => 'projekty',
				'posts_per_page'   => -1,
				'orderby' => 'title',
				'order'   => 'ASC'
			));
		}
		else {
			$projectsQuery = new WP_Query(array( 
				'post_type' => 'projekty',
				'posts_per_page'   => -1,
				'orderby' => 'title',
				'order'   => 'ASC',
				'tax_query' => array(
					array(
						'taxonomy' => 'typ_projektu',
						'field' => 'ID',
						'terms' => $param,
						)
				),
			));
		}
}

function get_projects() {

$param = $_POST['projectType'];

if($param == 'wszystkie') {

$projectsQuery = new WP_Query(array(

'post_type' => 'projekty',

'posts_per_page' => -1,

'orderby' => 'title',

'order' => 'ASC'

));

}

else {

$projectsQuery = new WP_Query(array(

'post_type' => 'projekty',

'posts_per_page' => -1,

'orderby' => 'title',

'order' => 'ASC',

'tax_query' => array(

array(

'taxonomy' => 'typ_projektu',

'field' => 'ID',

'terms' => $param,

)

));

}

We also need to prepare the structure that we will be sending out through the JSON.

We already have a list of projects depending on the project type sent by $.post() type of project that we keep in the $projectsQuery. We are missing a list of project types that we would load into our container – types-container. We download it using the PHP function available in WordPress – WP_Term_Query(), which will download us a list of taxonomy providers.

$projectsTypeQuery = new WP_Term_Query( array(
				'taxonomy' => 'typ_projektu',
				'hide_empty' => false,
    			'order'   => 'DESC',
		) );

$projectsTypeQuery = new WP_Term_Query( array(

'taxonomy' => 'typ_projektu',

'hide_empty' => false,

'order' => 'DESC',

) );

To be able to work on downloaded lists $projectsQuery and $projectsTypeQuery we have to choose from them what we are interested in: posts and taxonomies. We assign them to the appropriate variables.

$projects=($projectsQuery->posts);
$typesProjektow=($projectsTypeQuery->terms);

1 2	$projects=($projectsQuery->posts); $typesProjektow=($projectsTypeQuery->terms);

We prepare empty arrays, which we will finally send out using AJAX and the json_encode(), which will encode our data into JSON code. The first table will store html projects and we will call it $projectsString. The next table will store a list of project types – $typesString. The last array will store our JSON code and will be sent using the echo function – we will call it $contents.

$projektyString = [];
$typyString = [];
$contents = [];

$projektyString = [];

$typyString = [];

$contents = [];

We will start by reading the list of projects to $projectsString[]. A single project will be displayed in the <a> tag with .project-card. It will contain a link to the project and a project image. Each project will be loaded using the loop foreach.

foreach($projekty as $projekt) {
	$projektyString[] = '<a class="project-card" href="'. get_permalink($projekt->ID) .'"><img src="'.get_the_post_thumbnail_url($projekt->ID).'"/></a>';		
}

foreach($projekty as $projekt) {

$projektyString[] = '<a class="project-card" href="'. get_permalink($projekt->ID) .'"><img src="'.get_the_post_thumbnail_url($projekt->ID).'"/></a>';

}

We have a list of projects to send out. Now we have to create a list of project types. Our taxonomies contain the relevant project type names, which we will display later in the .types-container, but what if we want to display all projects? Some type of project must be responsible for this. The initial value sent in projectType, after loading the script, sends us projectType==’all’. So we have to add to $typesString[] the project type responsible for all projects, then we load the other project types by standard foreach loop. The project type will be displayed in the <a> tag and will contain predefined classes: . project-type and class .type-active, which will initially be assigned to the project type – all. Each project type must contain the data-project-type attribute, which will store the project type ID, and for all projects it will store the string – “all”. The tag will display the name of the project type.

$typyString[] = '<a class="project-type type-active" data-project-type="wszystkie">Wszystkie</a>';
foreach($typyProjektow as $typ) {
	$typyString[] = '<a class="project-type" data-project-type="'.$typ->term_id.'">'.$typ->name.'</a>';
}

$typyString[] = '<a class="project-type type-active" data-project-type="wszystkie">Wszystkie</a>';

foreach($typyProjektow as $typ) {

$typyString[] = '<a class="project-type" data-project-type="'.$typ->term_id.'">'.$typ->name.'</a>';

}

Finally, we add our boards to an empty board $contents and code with json_encode(). Send with an echo and kill the get_projects() with die().

$contents = json_encode([ $projektyString, $typyString ]);	
echo $contents;
die();

$contents = json_encode([ $projektyString, $typyString ]);

echo $contents;

die();

You still need to add two actions, with prefixes wp_ajax and wp_ajax_nopriv – these are the hook’i in WordPress that allow us to create our own AJAX requests, followed by the name of the action that will use them. Hook wp_ajax– for logged in users, wp_ajax_nopriv – for not logged in users. In our case it doesn’t matter if the user is logged in (anyone can display a list of projects).

add_action( 'wp_ajax_get_projects', 'get_projects' );
add_action( 'wp_ajax_nopriv_get_projects', 'get_projects' );

1 2	add_action( 'wp_ajax_get_projects', 'get_projects' ); add_action( 'wp_ajax_nopriv_get_projects', 'get_projects' );

The whole code contained in functions.php:

function add_js_scripts_redo() {
        wp_enqueue_script( 'redoscript', get_template_directory_uri().'/js/redo-script.js', array('jquery'), 1, 1, 1 );

		if ( isset($_SERVER['HTTPS']) )  
       	$protocol = 'https://';  
   		 else  
       	$protocol = 'http://';  
		   
        // pass Ajax Url to script.js
        wp_localize_script('redoscript', 'ajaxurl' , admin_url( 'admin-ajax.php', $protocol ) );
    }
    add_action('wp_enqueue_scripts', 'add_js_scripts_redo');

    add_action( 'wp_ajax_get_projects', 'get_projects' );
	add_action( 'wp_ajax_nopriv_get_projects', 'get_projects' );
	function get_projects() {
		$param = $_POST['projectType'];
		if($param == 'wszystkie') {
			$projectsQuery = new WP_Query(array( 
				'post_type' => 'projekty',
				'posts_per_page'   => -1,
				'orderby' => 'title',
				'order'   => 'ASC'
			));
		}
		else {
			$projectsQuery = new WP_Query(array( 
				'post_type' => 'projekty',
				'posts_per_page'   => -1,
				'orderby' => 'title',
				'order'   => 'ASC',
				'tax_query' => array(
					array(
						'taxonomy' => 'typ_projektu',
						'field' => 'ID',
						'terms' => $param,
						)
				),
			));
		}
		$projectsTypeQuery = new WP_Term_Query( array(
				'taxonomy' => 'typ_projektu',
				'hide_empty' => false,
    			'order'   => 'DESC',
		) );

		$projekty=($projectsQuery->posts);
		$typyProjektow=($projectsTypeQuery->terms);

		$projektyString = [];
		$typyString = [];
		$contents = [];

        foreach($projekty as $projekt) {
				$projektyString[] = '<a class="project-card" href="'. get_permalink($projekt->ID) .'"><img src="'.get_the_post_thumbnail_url($projekt->ID).'"/></a>';
		}
		$typyString[] = '<a class="project-type type-active" data-project-type="wszystkie">Wszystkie</a>';
		foreach($typyProjektow as $typ) {
			$typyString[] = '<a class="project-type" data-project-type="'.$typ->term_id.'">'.$typ->name.'</a>';
		}
		
		$contents = json_encode([ $projektyString, $typyString ]);
		echo $contents;
        die();
	}

function add_js_scripts_redo() {

wp_enqueue_script( 'redoscript', get_template_directory_uri().'/js/redo-script.js', array('jquery'), 1, 1, 1 );

if ( isset($_SERVER['HTTPS']) )

$protocol = 'https://';

else

$protocol = 'http://';

// pass Ajax Url to script.js

wp_localize_script('redoscript', 'ajaxurl' , admin_url( 'admin-ajax.php', $protocol ) );

}

add_action('wp_enqueue_scripts', 'add_js_scripts_redo');

add_action( 'wp_ajax_get_projects', 'get_projects' );

add_action( 'wp_ajax_nopriv_get_projects', 'get_projects' );

function get_projects() {

$param = $_POST['projectType'];

if($param == 'wszystkie') {

$projectsQuery = new WP_Query(array(

'post_type' => 'projekty',

'posts_per_page' => -1,

'orderby' => 'title',

'order' => 'ASC'

));

}

else {

$projectsQuery = new WP_Query(array(

'post_type' => 'projekty',

'posts_per_page' => -1,

'orderby' => 'title',

'order' => 'ASC',

'tax_query' => array(

array(

'taxonomy' => 'typ_projektu',

'field' => 'ID',

'terms' => $param,

)

));

}

$projectsTypeQuery = new WP_Term_Query( array(

'taxonomy' => 'typ_projektu',

'hide_empty' => false,

'order' => 'DESC',

) );

$projekty=($projectsQuery->posts);

$typyProjektow=($projectsTypeQuery->terms);

$projektyString = [];

$typyString = [];

$contents = [];

foreach($projekty as $projekt) {

$projektyString[] = '<a class="project-card" href="'. get_permalink($projekt->ID) .'"><img src="'.get_the_post_thumbnail_url($projekt->ID).'"/></a>';

}

$typyString[] = '<a class="project-type type-active" data-project-type="wszystkie">Wszystkie</a>';

foreach($typyProjektow as $typ) {

$typyString[] = '<a class="project-type" data-project-type="'.$typ->term_id.'">'.$typ->name.'</a>';

}

$contents = json_encode([ $projektyString, $typyString ]);

echo $contents;

die();

}

Radio! AJAX script running, filtering posts

We have received a working script which reads us posts of a selected type using AJAX in WordPress. To previously created containers the script adds project types and projects of a given type. After clicking on a given type, a query is sent to the server, which returns us properly filtered projects.

Summary

In this tutorial we showed how to add a simple AJAX script to filter custom posts in WordPress. Adding AJAX scripts in WordPress is not difficult, but you need to know some of the basic features of WordPress that we presented in this article.

If you want to learn more about WordPress or page builders such as WPBakery or Elementor, please visit the article list: Useful articles.