Filtrer les catégories avec Isotope

Isotope permet de filtrer les catégories avec le module Easypost (car il dispose d'un template que le repeater n'a pas). Globalement nous devrons insérer les slugs des catégories en classe pour chaque articles.

Afin de facilité la mise en place, vous pouvez utiliser mon plugin "OxyChild" qui dispose de la fonction nécessaire et des fichiers javascript. Il vous suffira d'activer le functions.php et l'insertion des javascript en activant Isotope.

Nous allons d'abord récupérer les catégories et en faire des boutons pour filtrer. Insérer un bloc de code au-dessus de votre module easypost. Il faudra donc utiliser cette fonction dans ce bloc et bien modifier "ma-taxonomie" par votre taxonomie personnelle (fonctionne avec les CPT)

oxychild_get_filters('ma-taxonomie');

Note : le nom de la fonction avec oxychild peut être changé. J'ai remplacé mon plugin maison OxyChild par Advanced Script. Je crée donc un script PHP que j'appelle Functions et il doit contenir ce code :

/* Functions needed for Isotope JS */

function oxychild_get_filters($taxonomy)
{
	$terms = get_terms($taxonomy);
	$count = count($terms);
	if ($count > 0) { ?>
		<div class="portfolio-categories filter-button-group">
			<button class="active" data-filter="*"><?php esc_html_e('TOUT', 'text-domain'); ?></button>
			<?php foreach ($terms as $term) { ?>
				<button data-filter=".<?php echo esc_attr($term->slug); ?>"><?php echo esc_html($term->name); ?></button>
			<?php } ?>
		</div>
		<?php
	}
}

Et ce css dans le même bloc que vous allez personnaliser à votre goût.

.filter-button-group button {
    margin-right: 10px;
    margin-bottom: 14px;
    padding: 10px 20px;
    border: none;
    border-radius: 15px;
    background-color: #1d3c2e;
    color: #fff;
    font-weight: normal;
    letter-spacing: normal;
    text-transform: uppercase;
    cursor: pointer;
    font-size: 13px;
}

.filter-button-group button:hover,
.filter-button-group button.active {
    color: #fff;
    background-color: #63917c;
}

.filter-button-group button:focus {
    outline-style: none;
    outline-color: transparent;
}
.filter-button-group {
	display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
}

Ensuite nous allons nous rendre dans le template php d'easypost et remplacer la première ligne (div avec la classe oxy-post) avec celle-ci (remplacer également "ma-taxonomie")

<div class='oxy-post <?php 
            $categories = get_the_terms( $post->ID, 'ma-taxonomie' );
foreach( $categories as $category ) { 
  echo ' ' . $category->slug;
} 
?> '>

Si vous avez bien réaliser tous les instructions, vous devriez pouvoir filtrer vos postes.

Note : vous pouvez remplacer dans la fonction, située dans functions.php, le mot "TOUT" par ce qui vous conviens le mieux.

Lien d'Isotope : https://isotope.metafizzy.co/