Display Custom Posts by Category With Ajax filter
Mon Aug 28 2023 12:01:08 GMT+0000 (Coordinated Universal Time)
Saved by @gshailesh27
//post category Filter Button
<ul class="row gx-lg-5 justify-content-center mb-4 fillterListing">
<li class="col-auto filter-btn active" id="all">All</li>
<?php
$terms = get_terms([
'taxonomy' => 'portfolio-category',
'hide_empty' => true,
]);
foreach ( $terms as $term ) {?>
<li class="col-auto filter-btn <?php echo $term->slug ?> ajaxData" id="<?php echo $term->term_id ?>"><?php echo $term->name ?></li>
<?php } ?>
</ul>
//Default All Post and After Ajax Replaced Div on template page code
<div class="row gx-lg-5" id="category-post-content">
<div id="loading-animation" class="text-center"><img src="https://kwebmakerdigitalagency.com/ideacafe/wp-content/themes/ideacafe/assets/images/200w.gif"/></div>
</div>
<div class="row gx-lg-5" id="filter-parent">
<?php
$args = [
"post_type" => "portfolio",
"posts_per_page" => -1,
"order" => "DESC"
];
$query = new WP_Query($args);
if ($query->have_posts()) {
while ($query->have_posts()) { $query->the_post();
$terms = get_the_terms( $post->ID, 'portfolio-category' );
$post_date = get_the_date( 'M j, Y ' ); ?>
<div class="col-lg-6 portfolioContainer <?php
foreach ( $terms as $term ) {
echo $term->slug;
}?>">
<a href="#" class="portfolioBox">
<div class="portfolioPic">
<img src="<?php the_post_thumbnail_url(); ?>" alt="">
</div>
<div class="portTxt"><span>
<?php
foreach ( $terms as $term ) {
echo $term->name;
}
?>
</span>
<h5><?php the_title(); ?></h5>
<div class="portHoverTxt">
<?php the_excerpt(); ?>
</div>
</div>
</a>
</div>
<?php }
wp_reset_postdata();
} else {
// No posts found
}
?>
</div>
//Footer Code
<script>
$('.filter-btn').click(function() {
if (this.id == 'all') {
$('#filter-parent > div').fadeIn(450);
$('#category-post-content').hide();
} else {
$('#filter-parent > div').hide();
var termID = $(this).attr('id');
jQuery("ajaxData").removeClass("current");
jQuery("ajaxData").addClass("current"); //adds class current to the category menu item being displayed so you can style it with css
jQuery("#loading-animation").show();
var ajaxurl = 'https://kwebmakerdigitalagency.com/ideacafe/wp-admin/admin-ajax.php';
jQuery.ajax({
type: 'POST',
url: ajaxurl,
data: {"action": "load-filter2", term: termID },
success: function(response) {
jQuery("#category-post-content").html(response).fadeIn(450);
jQuery("#loading-animation").hide();
return false;
}
});
}
});
</script>
//Function.php code for ajax call
add_action( 'wp_ajax_load-filter2', 'prefix_load_term_posts' );
function prefix_load_term_posts () {
$term_id = $_POST[ 'term' ];
$args = array (
'post_type' => 'portfolio',
'posts_per_page' => -1,
'order' => 'DESC',
'tax_query' => array(
array(
'taxonomy' => 'portfolio-category',
'field' => 'id',
'terms' => $term_id,
'operator' => 'IN'
)
)
);
global $post;
$myposts = get_posts( $args );
ob_start (); ?>
<?php foreach( $myposts as $post ) : setup_postdata($post); ?>
<div class="col-lg-6 portfolioContainer <?php
foreach ( $terms as $term ) {
echo $term->slug;
}?>">
<a href="#" class="portfolioBox">
<div class="portfolioPic">
<img src="<?php the_post_thumbnail_url(); ?>" alt="">
</div>
<div class="portTxt"><span>
<?php
foreach ( $terms as $term ) {
echo $term->name;
}
?>
</span>
<h5><?php the_title(); ?></h5>
<div class="portHoverTxt">
<?php the_excerpt(); ?>
</div>
</div>
</a>
</div>
<?php endforeach; ?>
<?php wp_reset_postdata();
$response = ob_get_contents();
ob_end_clean();
echo $response;
die(1);
}



Comments