jQuery isotope plugin for wordpress posts filtering by category with pagination.
// 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 );
});
<?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>
<?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;
}