I created a custom post type and I want to list the posts with isotope.js filters and with endless scrolls for paging. If I click on the filter button and the item is not on the second page, it does not show me anything. I have to load all the pages first to make the filter work. Can you help me?

This is the page archive-catalog.php

<section class="">
    <div class="row">
        <div class="col-lg-12">

        <div class="list-product-all">
        <div class="button-group filter-button-group animate fadeIn pb-40">
          <button data-filter="*" class="btn is-checked mb-sm-10">All</button>
             $terms = get_terms("category_catalog"); // get all categories, but you can use any taxonomy
             $count = count($terms); //How many are they?
             if ( $count > 0 ){  //If there are more than 0 terms
             foreach ( $terms as $term ) {  //for each term:
             echo '<button data-filter=".'.$term->slug.'" class="btn mb-sm-10">' . $term->name . '</button>';
             //create a list item with the current term slug for sorting, and name for label


        <div class="list-product">
            <div class="row">
                $default_thumbnail = get_template_directory_uri() . '/assets/img/default-image.jpg';

                $args = array(
                    'post_type'   => 'catalog',
                    'post_status'=> 'publish',
                    'posts_per_page' => 10,
                    'paged' => $paged,
                    'order' => 'ASC',
                    'orderby' => 'date',
                $the_query = new WP_Query($args);
                if ( $the_query->have_posts() ) :
                while ($the_query->have_posts()) : $the_query->the_post(); ?>

                <div class="col-lg-4 mb-30 <?php global $post; $terms = wp_get_post_terms( $post->ID, 'category_catalog'); foreach( $terms as $term ){ echo $taxonomy_slug = $term->slug . ' '; unset($term);}?>">
                    <div class="box">
                        <div class="single-item">
                            <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"></a>
                            <div class="img-holder">                        
                                if (has_post_thumbnail()):
                                    $image_id = get_post_thumbnail_id();
                                    $images = wp_get_attachment_image_src($image_id, 'img768');
                                    $attachment_title = get_the_title($image_id);
                                    $srcset = wp_get_attachment_image_srcset( $image_id  );
                                    $sizes = wp_get_attachment_image_sizes( $image_id, 'img768' )?>
                                    <img src="<?php echo $images[0]?>" alt="<?php echo $attachment_title ?>" srcset="<?php echo $srcset ?>" sizes="<?php echo $sizes ?>" >
                                <?php else:
                                <img src="<?php echo $default_thumbnail; ?>" alt="<?php the_title(); ?>" class="img-fluid" />
                                <?php endif; ?>
                            <div class="overlay">
                                <div class="inner">
                                <h4><?php the_title(); ?></h4>

                <?php endwhile; ?>
                <div class="pagination">
                    <?php custom_pagination(); ?>
                <?php else : ?>
                    <p>No products found</p>
                <?php endif; ?>
                <?php wp_reset_query();?>

This is isotope + infinite scroll js

    // imagesLoaded + masonry + infine scroll
    var $grid = $('.list-product');

    $grid.imagesLoaded().progress( function() {
          itemSelector: '.col-lg-4',
          masonry: {
            columnWidth: '.col-lg-4',

    // filter
    $('.filter-button-group').on( 'click', 'button', function() {
      var filterValue = $(this).attr('data-filter');
      $('.filter-button-group button').removeClass('is-checked');
      $grid.isotope({ filter: filterValue });


    // infinite scroll
    loading: {
        img: 'http://i.imgur.com/qkKy8.gif',
        finishedMsg: '',
        msgText: "Loading..."
    navSelector: '.pagination',
    nextSelector: '.pagination a.next',
    itemSelector: '.col-lg-4',
    }, function(newElements) {
        var $newElems = $(newElements).hide();
        $newElems.imagesLoaded(function() {
        $('.list-product').imagesLoaded( function() {
            $('.list-product').isotope('append', $newElems);
    // end isotope + infine scroll

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.