Simple Ajax Category Post Filter

Index.php

<?php 
/**
Plugin Name:  ajax test
Plugin URI: http://wordpress.org/plugins/ajax/
Description: Woocommerce shortcode [mini_cart].
Author: Tamal Sarker
Version: 1.0.0
Author URI: http://templateeye.com/
*/

/* Set constant path to the plugin directory. */
define('EYE_PATH', plugin_dir_path(__FILE__));
/* Set the constant path to the plugin directory URI. */
define('EYE_URL', plugin_dir_url(__FILE__));

/* Add CSS */
function eye_styles(){
	wp_register_style( 'header_cart_css', EYE_URL . 'assets/css/header-cart.css' , array(), '1.1.0', false );
	wp_enqueue_style( 'header_cart_css' );
}
add_action('wp_head', 'eye_styles', 5);

/* Add JS */
function eye_scripts() {
	wp_register_script( 'header_cart_js', EYE_URL . 'assets/js/header-cart.js', array('jquery'), '1.0.0', true );
	wp_enqueue_script( 'header_cart_js' );
	wp_localize_script('header_cart_js', 'ajax_custom', array(
		'ajaxurl' => admin_url('admin-ajax.php'),
		'nonce' => wp_create_nonce('ajax-nonce'),
		'getID' => get_the_ID()
	));
}
add_action('wp_footer', 'eye_scripts', 5);

//call post function
require_once(EYE_PATH . 'function.php');

add_shortcode('aj_exam', 'aj_exam');
function aj_exam(){
	?>
    <section>
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <h2>Filters</h2>
                <form action="" method="post" id="filterform">
                    <h5>Categories</h5>
                    <?php 
                        $categories = get_terms('category',array(
                            'hide_empty' => false,
                        ));
                        // print_r($categories);
                        foreach($categories as $category){ ?>
                        <input  type="checkbox" name="category[]" value="<?php  echo $category->term_id; ?>" > <?php echo $category->name; ?><br>
                        <?php 
                        }
                    ?>
                    <input type="hidden" name="action" value="ajax_filters" ><br>
                    <div class="clearfix">  </div>
                    <button type="button" id="add_enquiry_2" class="btn btn-sm btn-secondary">Apply Filters</button>
                </form> 
            </div>
            <div class="col-md-9">
                <div id="postdata">
            <?php 
                $args = array(
                    'post_type' => 'post',
                    'status' => 'publish'
                );
                // the query
                $the_query = new WP_Query( $args ); ?>
                
                <?php if ( $the_query->have_posts() ) : ?>
                
                    <!-- pagination here -->
                
                    <!-- the loop -->
                    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
                        <h2 class="h5"><?php the_title(); ?></h2>
                        <p><?php the_excerpt();?></p>
                        <hr>
                    <?php endwhile; ?>
                    <!-- end of the loop -->
                
                    <!-- pagination here -->
                
                    <?php wp_reset_postdata(); ?>
                
                <?php else : ?>
                    <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
                <?php endif; ?>
                </div>
            </div>
        </div>  
    </div>
</section>
<?php
}
	

function.php

<?php
/*  Ajax  Filters Function */
add_action("wp_ajax_ajax_filters", "ajax_filters_handler");
add_action("wp_ajax_nopriv_ajax_filters", "ajax_filters_handler");

function ajax_filters_handler() {

           $cat_ids = $_REQUEST['category'];
           $csv_cats = implode(", ", $cat_ids);
           echo "Showing Results for (Term ID):".$csv_cats;
                $args = array(
                    'post_type' => 'post',
                    'status' => 'publish',
                    'category__in' => $cat_ids
                );
                // the query
                $the_query = new WP_Query( $args ); ?>
                
                <?php if ( $the_query->have_posts() ) : ?>
                
                    <!-- pagination here -->
                
                    <!-- the loop -->
                    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
                        <h2 class="h5"><?php the_title(); ?></h2>
                        <p><?php the_excerpt();?></p>
                        <hr>
                    <?php endwhile; ?>
                    <!-- end of the loop -->
                
                    <!-- pagination here -->
                
                    <?php wp_reset_postdata(); ?>
                
                <?php else : ?>
                    <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
                <?php endif; ?>

                <?php
    wp_die();
}

header-cart.js

jQuery( "#add_enquiry_2" ).on('click',function() { 
jQuery(document).ready(function($) {	
	jQuery( "#add_enquiry_2" ).on('click',function() {
		//alert("okay");	
		jQuery("body").css("opacity",".8");
		var ajaxurl = ajax_custom.ajaxurl;
		var postdata = $("#filterform").serialize();
		jQuery.post(ajaxurl, postdata, function (response) {
			$("#postdata").html(response);
			console.log(response);
		}).done(function() {
			$("body").css("opacity","1");
		});
	});
});

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>