jQuery isotope plugin for wordpress posts filtering by category with pagination.

get-isotope-items.php

<?php

function get_isotope_item( $query_args = array() ){

    $defaults = array(
        'post_type' => 'post',
        'posts_per_page' => -1,
        'post_status'   => 'publish',
    );
    
    // global isotope items per page    
    $items_per_page = 4;

    $query_args = wp_parse_args( $query_args, $defaults );


    $query = new WP_Query( $query_args );
    $total_pages = absint( $query->found_posts / $items_per_page ) + 1;

    //echo '<pre>';print_r($query_args);echo '</pre>';exit;

    $yield = array(
        'total_pages'   => $total_pages,
        'found_posts'   => $query->found_posts,
        'posts_per_page' => $items_per_page,
        'output_items'   => '',
        'output_pagination'   => ''
    );

    if ( $query->have_posts() ) {

        
        $temp_counter = 0;
        $page_counter = 1; // starting page number

        ob_start();
        while ( $query->have_posts() ){
            $query->the_post();
            
            $page_counter = absint( $temp_counter  / $items_per_page ) + 1;
            /*if( $temp_counter == 0 ){
                echo '<div class="row">';
            }*/

            $image = get_field("image");
            $img_url = '';
            if( !empty( $image ) ){
                $img_url = $image['sizes']['large'];
            }    

            $classes = array();
            $categories = wp_get_post_terms( get_the_ID(), 'category' ); 
            if ( ! empty( $categories ) && ! is_wp_error( $categories ) ){
                foreach( $categories as $key => $term ){
                    $classes[] = $term->slug;
                }
            }   
            ?>

            <div class="isotope-item <?php echo implode( ' ', $classes); ?>" data-page="<?php echo $page_counter; ?>">
                <div class="isotope-item-inner">
                    <!-- <img class="isotope-item-featured-img" src="<?php echo $img_url; ?>"/> -->
                    <div class="isotope-item-featured-img" style="background-image:url(<?php echo $img_url; ?>);"></div>
                    <a class="isotope-item-title" href="<?php echo get_permalink(); ?>">    
                        <?php echo get_the_title( get_the_ID() ); ?>
                    </a>    
                    <div class="isotope-item-excerpt">
                        <?php echo wp_trim_words( get_the_content( get_the_ID() ), 80, '' ); ?>
                        <?php //echo wp_trim_excerpt( get_the_content( get_the_ID() ) ); ?>
                        <div class="isotope-item-read-more-wrap">
                            <a href="<?php echo get_permalink(); ?>" title="Continue Reading">Read More</a>
                        </div>
                        <div class="zigzag-divider"></div>
                    </div>    
                </div>
            </div>  

            <?php
            /*if( $temp_counter == 3 || $query->found_posts == $post_counter ){
                echo '</div><!-- ./row-->';
                $temp_counter = -1;
            }
            $post_counter++;*/

            $temp_counter++;
        }
        $yield['output_items'] = ob_get_clean();
    }        

    wp_reset_postdata();


    if( $total_pages  > 1 ): //pagination if more than one pages

    ob_start();
    ?>
    <div class="pagination" data-paged="1" data-total_pages="<?php echo $total_pages; ?>">
        <div class="row">
            <div class="col-sm-3 col-xs-6 pagination-lcol">
                <a class="nav-previous inline-block btn disabled" title="Previous Page">Previous</a>
            </div>
            <div class="col-sm-6 col-xs-6 pagination-mcol">
            <?php
            for( $i = 1; $i <= $total_pages; $i++ ){ 

                //$class = ( $i == 1 ) ? 'disabled' : '';
                printf( __('<a class="numbered-page-nav inline-block btn" title="Go to Page" data-page_index="%d">%d</a>', 'roots'), $i, $i, $i );

            }
            ?>          
            </div>
            <div class="col-sm-3 col-xs-6 pagination-rcol">
                <a class="nav-next inline-block btn" title="Next Page">Next</a>
            </div>
        </div>
    </div><!-- ./pagination-->
    <?php

    $yield['output_pagination'] = ob_get_clean();

    endif;



    return $yield;


}

index.php

<?php

$args = array(
    'orderby'           => 'name', 
    'order'             => 'ASC',
    'hide_empty'        => false, 
    'fields'            => 'all', 
); 

$filters_html = '';
$product_filter_terms = get_terms( 'category', $args );

if ( ! empty( $product_filter_terms ) && ! is_wp_error( $product_filter_terms ) ){
    foreach( $product_filter_terms as $key => $term ){
        $filters_html .= wp_sprintf( '<a class="filter btn btn-link" data-filter=".%s" data-term="%s">%s</a>', $term->slug, $term->slug, $term->name );
    }
}
$filters_html .= '<a class="filter btn btn-link active" data-filter="*" data-term="all">All</a>';


$query_args = array(
    "post_type"         => 'post',
    "post_status"       => 'publish', 
    'posts_per_page'    => -1,
);

if( !empty( $page_term->slug ) ) {

    $query_args["tax_query"] =  array(
        array(
            'taxonomy' => 'category',
            'field'    => 'slug',
            'terms'    => array( $page_term->slug ),
        )
    );

}

$yield = get_isotope_item( $query_args );

?>
<section id="posts-filter-section">
    <h5>Filter</h5>
    <div class="arrow-divider small"></div>
    <div id="filters-grid">
        <?php echo $filters_html; ?>
    </div>
    <div class="zigzag-divider"></div>

    <div class="row posts-wrap">
        <div class="col-sm-8 col-xs-12">
            <div id="posts-grid" class="posts-container isotope">
                <?php echo $yield['output_items']; ?>
            </div>  
            <div class="clearfix"></div>
            <div id="posts-pagination-wrap">
                <?php echo $yield['output_pagination']; ?>
            </div>
        </div>
        <div class="col-sm-4 col-xs-12">
            <?php 
                echo savi_get_find_store_widget();
            ?>
        </div>
    </div>    
    
</section>

isotope-pagination.js

// JavaScript to be fired on the home page
        var $grid = $('#posts-grid'),
        $iso_obj = null;

        var PostsFltr = {

            __init_isotope: function() {
                  $iso_obj = $grid.isotope({
                    itemSelector: '.isotope-item'
                  });
            },
            __filter_isotope_items_by_category: function( cat ){

                $grid.isotope({
                  filter: cat
                });
            },
            __remove_items: function( items ){
                $grid.isotope('remove', items );
            }, 
            __append_items: function( items ){
                $grid.append( items )
                // add and lay out newly appended items
                .isotope( 'appended', items ).isotope('layout');
            },  
            __insert_items: function( items ){
                $grid.isotope('insert', $( items ) ); //.isotope('layout');
            },  
            __filter_isotope_items_by_page: function( page_index ){
                $grid.isotope({
                  filter: '[data-page="'+ page_index +'"]'
                });
            },
            __getItemElements: function(){  //Returns an array of item elements.
              return  $grid.isotope('getItemElements');
            },
        };

        var PaginationFltr = {

            __go_to_page: function( index ) {
              ProductsFltr.__filter_isotope_items_by_page( index );
            },
            __get_current_page_index: function() {
              return parseInt( $('#posts-pagination-wrap').find('.pagination').attr('data-paged') );
            },
            __get_total_pages: function() {
              return parseInt( $('#posts-pagination-wrap').find('.pagination').attr('data-total_pages') );
            },
            __set_current_page_index: function( new_paged ) {
              $('#posts-pagination-wrap').find('.pagination').attr('data-paged', new_paged );

              $('#posts-pagination-wrap .numbered-page-nav').removeClass('active');
              $('#posts-pagination-wrap .numbered-page-nav:eq('+ ( new_paged - 1 ) +')').addClass('active');

            },
            __enable_disable_links: function( new_paged ) {


                new_paged = parseInt( new_paged );

                // console.log('new_paged='+new_paged);
                // console.log('total_pages='+this.__get_total_pages());

                if( new_paged === 1 ){
                  $('#posts-pagination-wrap').find('.nav-previous').addClass('disabled');
                } else{
                  $('#posts-pagination-wrap').find('.nav-previous').removeClass('disabled');
                }
                
                if( new_paged === this.__get_total_pages() ){
                  $('#posts-pagination-wrap').find('.nav-next').addClass('disabled');
                }else{
                  $('#posts-pagination-wrap').find('.nav-next').removeClass('disabled');
                }

             
            }

        };      

        // On Page Init
        PostsFltr.__init_isotope();
        PostsFltr.__filter_isotope_items_by_page(1);

        $(document).on('click', '#filters-grid > a:not(.active)', function(event) {
            
            var _this = $(this),
            term = _this.attr('data-term');

            $('#filters-grid > a').removeClass('active');
            _this.addClass('active');

            $('#posts-grid').append( $ajax_loader );
            var postData = {
              'action' : 'posts_load_more',
              'term' : term,
            };

            $.post( ajaxurl, postData, function( xhr_json_response ) {
                xhr_json_response = jQuery.parseJSON( xhr_json_response );

                PostsFltr.__remove_items( PostsFltr.__getItemElements() ); // Remove all
                PostsFltr.__insert_items( xhr_json_response.output_items ); // Add New
                $('#posts-pagination-wrap').html( xhr_json_response.output_pagination ); // Insert pagination Html


                PostsFltr.__filter_isotope_items_by_page( 1 );  
                PaginationFltr.__set_current_page_index( 1 );
                PaginationFltr.__enable_disable_links( 1 );
               
               $ajax_loader.remove();
              
            });

        });

        $(document).on('click', '.nav-previous', function(event) {

            var old_paged = PaginationFltr.__get_current_page_index(),
                new_paged = old_paged - 1;

            PostsFltr.__filter_isotope_items_by_page( new_paged );
            PaginationFltr.__set_current_page_index( new_paged );
            PaginationFltr.__enable_disable_links( new_paged );


        });
        $(document).on('click', '.nav-next', function(event) {
            
            var old_paged = PaginationFltr.__get_current_page_index(),
                new_paged = old_paged + 1;

            PostsFltr.__filter_isotope_items_by_page( new_paged );
            PaginationFltr.__set_current_page_index( new_paged );
            PaginationFltr.__enable_disable_links( new_paged );
        });
        $(document).on('click', '.numbered-page-nav', function(event) {
              
            var _this = $(this),
            new_paged = parseInt( _this.attr('data-page_index') );

            PostsFltr.__filter_isotope_items_by_page( new_paged );
            PaginationFltr.__set_current_page_index( new_paged );
            PaginationFltr.__enable_disable_links( new_paged );
        });