<?php
/**
* AJAX Taxonomy Term Filter - functions.php
*
* Author: Gemma Plank
* Author URL: https://makedo.net
* Version: 1.0
*
*/
// Function to enqueue our custom js file and make ajax parameters accessible.
function mkdo_ajax_enqueue() {
// Set js file url & path.
$ajax_js_url = get_theme_file_uri( '/assets/js/ajax.js' );
$ajax_js_path = dirname( __FILE__ ) . '/assets/js/ajax.js';
// Enqueue js file.
wp_enqueue_script(
'mkdo-admin-ajax-js',
$ajax_js_url,
array( 'jquery' ),
filemtime( $ajax_js_path ),
true
);
// Localise our js file and set the ajax url
wp_localize_script(
'mkdo-admin-ajax-js',
'mkdo_ajax_url',
admin_url( 'admin-ajax.php' )
);
// Localise our js file and set the ajax nonce
wp_localize_script(
'mkdo-admin-ajax-js',
'mkdo_ajax_nonce',
wp_create_nonce('mkdo_ajax_nonce_string')
);
}
add_action( 'wp_enqueue_scripts', 'mkdo_ajax_enqueue' );
// Function to handle our ajax request.
function mkdo_ajax_function() {
// Store outcome of our nonce check.
$nonce = check_ajax_referer( 'mkdo_ajax_nonce_string', 'security' );
// If nonce returns false, provide error message, otherwise continue.
if ( ! $nonce ) {
// Store error message in json - forces die().
wp_send_json_error('Nonce failed');
} else {
// Nonce has been successfully checked.
// Set up post args for filtered posts.
$args = array(
'post_type' => 'post',
'orderby' => 'name',
'tax_query' => array(
array(
'taxonomy' => $_POST['category'],
'field' => 'term_id',
'terms' => $_POST['term_id']
),
),
);
// Set up new WP_Query to find posts based on the above arguements.
$filtered_posts = new WP_Query( $args );
// Run the loop.
if ( $filtered_posts->have_posts() ) {
while ( $filtered_posts->have_posts() ) {
$filtered_posts->the_post();
get_template_part( 'template-parts/post' );
}
wp_reset_postdata();
} else {
echo 'No posts found';
}
// End the loop.
die();
}
}
add_action( 'wp_ajax_mkdo_ajax_function', 'mkdo_ajax_function' );
add_action( 'wp_ajax_nopriv_mkdo_ajax_function', 'mkdo_ajax_function' );
<?php
/**
* The front page template file
*
* If the user has selected a static page for their homepage, this is what will
* appear.
* Learn more: https://codex.wordpress.org/Template_Hierarchy
*
* @package WordPress
* @subpackage Twenty_Seventeen
* @since 1.0
* @version 1.0
*/
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php // Show the selected frontpage content.
if ( have_posts() ) :
while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'template-parts/filters' ); ?>
<div class="ajax-posts">
<?php get_template_part( 'template-parts/ajax-posts' ); ?>
</div>
<?php endwhile;
else :
get_template_part( 'template-parts/post/content', 'none' );
endif; ?>
</main><!-- #main -->
</div><!-- #primary -->
<?php get_footer();
<?php
// Set up args for posts.
$terms = get_terms( array(
'taxonomy' => 'category',
) );
// For each taxonomy term, create a button with the term name and use term id for the value.
foreach ( $terms as $term ) {
echo '<button class="mkdoButton" value="' . $term->term_id . '">' . $term->name . '</button>';
}
?>
(function( $ ) {
// On click of our filter button.
$( '.mkdoButton' ).on( "click", function() {
// Store clicked button's value.
var termId = $( this ).val();
// Make AJAX call.
$.ajax({
url : mkdo_ajax_url,
type : 'post',
data : {
'post_type' : 'post',
'category' : 'category',
'action' : 'mkdo_ajax_function',
'security' : mkdo_ajax_nonce,
'term_id' : termId,
},
success: function( response ) {
// On success replace front-page.php original posts with new filters posts.
$('.ajax-posts').html( response );
},
error: function(response) {
// If error occurs, print response in the console.
console.log('Error ' + response);
}
});
return;
});
})( jQuery );
<?php
// Set up args.
$args = array(
'post_type' => 'post',
);
// Create new WP_Query based on above args.
$original_posts = new WP_Query( $args );
// Begin loop.
if ( $original_posts->have_posts() ) {
while ( $original_posts->have_posts() ) {
$original_posts->the_post();
get_template_part( 'template-parts/post' );
}
wp_reset_postdata();
}
// End loop.
?>