Создаем фильтрацию элементов с помощью библиотеки Isotope

Этот пост вытащил из многолетних черновиков, поэтому особо расписывать не буду. Просто юзайте код.

Итак, подробнее про библиотеку здесь — https://isotope.metafizzy.co/

Код расписывать не буду, можно будет взять его на CodePren ниже.

Пример 1 — простая фильтрация элементов

Простая фильтрация, без изменения в hash.

See the Pen
Untitled by Denis (@deniscreative)
on CodePen.0

Пример 2 — фильтрация Isotope с изменением урла страницы

Этот вариант очень удобен для случая, когда нужно дать ссылку на конкретный фильтр, или чтобы вернуться со страницы элемента на тот же фильтр, который был выбран, а не на все элементы.

Фильтрация в hash будет такого формата /#filter=.graphic-design

HTML и CSS те же, что и в первом примере, а вот код JS полностью другой.

See the Pen
CodePen Home Isotope — filtering with URL hash by Denis (@deniscreative)
on CodePen.0

Разметка и стили в примерах рабочие, но созданы просто для несложного показа.

Теперь немного сложнее, ниже приведу пример кода для вывода кастомных элементов в WordPress.

<ul class="list-portfolio grid">
    <?php
    $args = array('post_type' => 'portfolio', 'posts_per_page' => -1);
    $loop = new WP_Query($args);
     while ($loop->have_posts()) : $loop->the_post();
        get_template_part('includes/content-portfolio');
    endwhile; ?>
</ul>

И ниже код файла content-portfolio с выводом каждого элемента:

<?php
// get term for Taxonomy name and for class for filtering
$terms = get_the_terms($post->ID, 'portfolio_category');
if ($terms) {
    $term = array_shift($terms);
    $termName = $term->name;
    $termSlug = $term->slug;
}
?>

<li class="p-item <?php echo $termSlug; ?>">
    <a href="<?php echo get_the_permalink(); ?>" class="p-link">
        <?php the_post_thumbnail(); ?>
        <span class="p-content">
            <span class="p-cat"><?php echo $termName; ?></span>
            <span class="p-title"><?php the_title(); ?></span>
            <span class="p-more">Read More</span>
        </span>
    </a>
</li>

Как вы все поняли, фильтрация элементов идет по классу, чтобы этот процесс сделать логичным и удобным, я указываю слаг таксономии как класс элемента. Таким образом если на Главной странице отфильтровать элементы или перейти в аналогичную таксономию, то список элементов будет идентичный.