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