Display Custom Posts by Category With Ajax filter

PHOTO EMBED

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);
}                                                     
                                                     
content_copyCOPY