Wp filter custom post+custom tax, by category id + load more

Wp filter custom post+custom tax, by category id + load more

DON'T FORGET **
- change to your value $image, setPostType(), html response tpl, html classes 
- hide by deffault in css 'page-stories__item' 


IN YOUR TEMPLATE 
================

    <!-- get all custom taxonomy categories -->
    <div class="stories-category__wrapper">
        <ul class="stories-category__nav">
            <li class="stories-category__item" data-post-filter="-1">ALL STORIES</li>
            <!-- get all custom taxonomy categories -->
            <?php
            $terms = get_terms( 'stories-category' );
            $count = count( $terms );
            if ( $count > 0 ) {
                foreach ( $terms as $term ) {
                    echo '<li class="stories-category__item" data-post-filter="'. $term -> term_id .'">' . $term->name . '</li>';
                }
            } ?>
        </ul>

        <button class="btn btn_updates" id="btn_updates"></button>
    </div>
    
    
    <!-- display all started custom posts -->
    <div class="stories-items">
        <?php if( empty( $paged ) || $paged == 0 ) $paged = 1;
        $args = array(
            'post_type' => 'stories',
            'post_status' => 'publish',
            'posts_per_page' => '2',
            'paged' => $paged
        );
        $start_posts = new WP_Query( $args ); ?>

        <div class="stories-items_container">
            <?php while ( $start_posts->have_posts() ) : $start_posts->the_post(); ?>
                <?php setup_postdata($post);

                //check image by default
                $image = get_the_post_thumbnail_url();
                if(!$image) {
                    $image = get_template_directory_uri().'/src/assets/images/archive-product-temp.jpg';
                } ?>

                <a class="page-content__item page-stories__item" href="<?php the_permalink(); ?>" style="background-image: url(<?php echo $image; ?>); display: block">
                    <span class="stories-item__title"><?php echo get_the_title(); ?></span>
                    <span class="stories-item__date"><?php echo get_the_date(); ?></span>
                </a>
            <?php endwhile; ?>
        </div>

        <?php if($start_posts->max_num_pages > 1) : ?>
            <button class="load-more__item">
                <span class="load-more__item-text">Load more</span>
                <span class="load-more__item-icon"><i class="fas fa-arrow-down"></i></span>
            </button>
        <?php endif; ?>
        <?php wp_reset_query(); ?>
    </div>
     
     
    <!-- wp-ajax frontend handler -->
    <?php get_template_part('template-parts/wp-ajax'); ?>
    
    
IN YOUR TEMPLATE -- RECOMENDED IN SEPERATE FILE
===============================================

recomended path to file 'template-parts' name 'wp-ajax'

<script>
    jQuery(function($) {
        var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>",
            paged = 2,
            categoryId = -1,
            data = {},
            postType,
            flag = false,
            btnMore = $('.load-more__item');

        //set post type
        function setPostType() {
            if( $('body').hasClass('post-type-archive-stories') ) {
                postType = 'stories'
            } else {
                postType = 'posts'
            }
            return postType;
        }

        //filter button event
        $('.stories-category__item').on('click', function () {
            flag = true;
            paged = 1;
            categoryId = $(this).attr('data-post-filter');
            requestData();
        });

        //load more event
        btnMore.on('click', function() {
            flag = false;
            $(this).attr('disabled', true);
            $('.load-more__item .load-more__item-text').text('Loading...');
            requestData();
        });

        //request data
        function requestData() {
            data = {
                'action': 'load_posts_by_ajax',
                'post_type': setPostType(),
                'paged': paged,
                'posts_per_page': 2,
                'category_id': categoryId,
                'security': '<?php echo wp_create_nonce("load_more_posts"); ?>'
            };

            $.post({ // you can also use $.post here
                url: ajaxurl, // AJAX handler
                data : data,
                dataType: "json", // add data type
                success : function(response) {
                    $('.load-more__item .load-more__item-text').text('Load more');
                    response.maxPages <= paged ? btnMore.hide() : btnMore.attr('disabled', false).fadeIn(600);

                    if(flag) {
                        $('.stories-items_container').empty();
                        paged = 2;
                    } else {
                        paged++;
                    }
                    $('.stories-items_container').append(response.html);
                    $('.page-stories__item').fadeIn(400);
                },
                error: function() {
                    alert('Error server response');
                }
            });
        }
    });
</script>



In YOUR FUNCTIONS.PHP -- RECOMENDED IN SEPERATE FILE
====================================================

recomended path to file 'include' name 'wp-ajax-filter'
/**
 * Stories filter
 */
require get_template_directory() . '/include/wp-ajax-filter.php';


<?php
/**
 * Add backend filter handler.
 */
add_action('wp_ajax_load_posts_by_ajax', 'load_posts_by_ajax_callback'); //for admin
add_action('wp_ajax_nopriv_load_posts_by_ajax', 'load_posts_by_ajax_callback'); //for all users

function load_posts_by_ajax_callback() {
    check_ajax_referer('load_more_posts', 'security');
    $post_type = $_POST['post_type'];
    $paged = $_POST['paged'];
    $posts_per_page = $_POST['posts_per_page'];
    $category_id = $_POST['category_id'];

    //check id
    if( $category_id == -1 ) {
        $args = array(
            'post_type' => $post_type,
            'post_status' => 'publish',
            'posts_per_page' => $posts_per_page,
            'paged' => $paged
        );
    } else {
        $args = array(
            'post_type' => $post_type,
            'post_status' => 'publish',
            'posts_per_page' => $posts_per_page,
            'paged' => $paged,
            'tax_query' => array(
                array(
                    'taxonomy' => 'stories-category',
                    'field'    => 'id',
                    'terms'    => $category_id
                ))
        );
    }

    //set query
    $my_posts = new WP_Query( $args );
    if($my_posts->have_posts()){
        while($my_posts->have_posts()) {
            $my_posts->the_post();

            //check image
            $image = get_the_post_thumbnail_url();
            if(!$image) {
                $image = get_template_directory_uri().'/src/assets/images/archive-product-temp.jpg';
            }

            //response template
            $response['html'] = $response['html'] . '<a class="page-content__item page-stories__item" href="'. get_the_permalink() .'" style="background-image: url('. $image .')">
                                                         <span class="stories-item__title">'. get_the_title() .'</span>
                                                         <span class="stories-item__date">'. get_the_date() .'</span>                                                             
                                                     </a>';
        }
        $response['maxPages'] = $my_posts->max_num_pages;
    }
    //return the data
    echo json_encode($response);
    //reset data
    wp_die();
}