Сообщения WordPress имеют изотоп — как добавить нумерацию страниц / фильтр

У меня есть экземпляр изотопа на моей странице новостей в WordPress. Я сделал так, что категории могут быть отсортированы с помощью связанного списка. Моя проблема возникает с нумерацией страниц / фильтрацией.

Моя первая проблема — добавление нумерации страниц в изотоп. Я нашел статью Вот который я пытался продублировать для моего использования.

Мой HTML / PHP

<?php
function custom_taxonomies_terms_links(){
// get post by post id
$post = get_post( $post->ID );
// get post type by post
$post_type = $post->post_type;
// get post type taxonomies
$taxonomies = get_object_taxonomies( $post_type, 'objects' );
$out = array();
foreach ( $taxonomies as $taxonomy_slug => $taxonomy ){
// get the terms related to post
$terms = get_the_terms( $post->ID, $taxonomy_slug );
if ( !empty( $terms ) ) {
foreach ( $terms as $term ) {
$out[] = $term->slug.' ';
}
}
}
return implode('', $out );
}
function excerpt($limit) {
return wp_trim_words(get_the_excerpt(), $limit);
}

$num = 0; // post number
$page_num = 1; // starting page number
$items_per_page = 4; // how many posts per page?
$i = 0; // our counter
?>

<?php
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<div class="col-sm-3 news-item <?php echo custom_taxonomies_terms_links();?>" page="<?php echo $page_num;?>">
<a href="<?php the_permalink();?>">
<?php
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
the_post_thumbnail('large', array( 'class' => 'img-responsive' ));
}
?>
</a>
<span class="meta"><?php the_category(' '); ?> : <?php the_date('M d, Y'); ?></span>
<h3><a href="<?php the_permalink();?>"><?php the_title();?></a></h3>
<?php echo excerpt(30);?>
</div>

<?php $num++ ?>
<?php endwhile; ?>
<?php
if (!($num % $items_per_page)){ // if the page is full, add page button and move to next page
if ($page_num > 1) {
//next page
echo '<div class="goto-page next post news-item" page="'.($page_num-1).'">'. //show on previous page
'<a href="#" class="page" page=".news-item[page~='.($page_num).']">'. //point to this page
'<span>More Styles</span></a></div>';

//previous page
echo '<div class="goto-page previous post news-item" page="'.$page_num.'">'. //show on previous page
'<a href="#" class="page" page=".news-item[page~='.($page_num-1).']">'. //point to this page
'<span>Previous Styles</span></a></div>';
}
$page_num++;
}?>
<?php endif; ?>

<?php if ( $page_num > 1 && ($num % $items_per_page) != 0 ){
//next page
echo '<div class="goto-page next post news-item" page="'.($page_num-1).'">'. //show on previous page
'<a href="#" class="page" page=".news-item[page~='.($page_num).']">'. //point to this page
'<span>More Styles</span></a></div>';

//previous page
echo '<div class="goto-page previous post news-item" page="'.$page_num.'">'. //show on previous page
'<a href="#" class="page" page=".news-item[page~='.($page_num-1).']">'. //point to this page
'<span>Previous Styles</span></a></div>';
} ?>

Мой jQuery

var containerNews = $('.latest-container');

containerNews.isotope( { filter : ".news-item[page~='1']" } ); // starting filter
containerNews.isotope({
itemSelector: '.news-item',
layoutMode: 'fitRows',
percentPosition: true
});

$('.latestNav li').click(function(){

(".latestNav li").removeClass("active");
$(this).addClass("active");

var selector = $(this).attr('data-filter');
containerNews.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
return false;
});

$('div.goto-page a').click(function(){
var selector = $(this).attr('page'); // make selector equal to the value we put in 'page'
containerNews.isotope( { filter : selector });
return false;
});

Это на самом деле нарушает изотоп, но если я удаляю containerNews.isotope( { filter : ".news-item[page~='1']" } ); тогда это будет работать снова (но без нумерации страниц)

Мой второй вопрос — фильтрация по категориям. Например, скажите, если у меня есть 8 постов, отображаемых на странице, но всего 16 постов. 12 из этих постов относятся к категории «события». В настоящее время, если я нажму на «События» (чтобы показать только эти сообщения), он будет отсортирован только из 8 доступных (а не 12) — есть ли способ обойти это?

Кому-нибудь удалось успешно провести как пагинацию, так и фильтрацию с помощью изотопа в WordPress?