Filtering Taxonomy Terms by a Custom Field using Isotope

le 26/10/2021
JAG

This members-only tutorial provides the steps to filter terms of a specified taxonomy by a Checkbox-type of custom ACF field using Isotope.

We shall
create a field group with location set to a “Series” taxonomy of a “Lessons” CPT.add a Checkbox-type “Genres” custom field in the field group having a few value : label choices.edit a static Page with Oxygen and add the code toloop through the custom field’s choices and output them as filter buttonsloop through the taxonomy terms and for each term output term image, term name, term description all wrapped inside an anchor tag that links to the term archive pageadd space-separated custom field values to each item as classesload and initialize Isotope.
Step 1
To follow along with the rest of this tutorial create lesson CPT with an associated series taxonomy using a plugin like CPT UI.
Step 2
Create an Advanced Custom Fields field group having a Checkbox-type of field.

I entered the choices like so:
blues : Blues
country : Country
guitar : Guitar
jazz : Jazz
metal : Metal
rock-and-soul : Rock & Soul
Set the Return value to Both (Array) since we need both the labels and values to work with.
Step 3
Install and activate WP Term Images plugin. This is for attaching an image to each of our taxonomy terms. You may alternately use ACF for this. In this tutorial we shall use WP Term Images.
Edit your terms and enter description, set an image and tick the corresponding genres.

Step 4
Create a Page called say, “Series” and edit it with Oxygen.
Add a Section.
Text Color: #eeeeeeBackground Color: #262525Section Container Width: full-width
Add a Code Block.
Set its width to 100%.
PHP & HTML:

$label ) {
printf( '', $value, $label );
}
?>

'series',
'hide_empty' => false,
) );

if ( ! empty( $terms ) && ! is_wp_error( $terms ) ) {
echo '

';
foreach ( $terms as $term ) {
// image id is stored as term meta.
$image_id = get_term_meta( $term->term_id, 'image', true );

// image data stored in array, second argument is which image size to retrieve.
$image_data = wp_get_attachment_image_src( $image_id, 'featured_image_series' );

// image url is the first item in the array (i.e., 0).
$image = $image_data[0];

if ( ! empty( $image ) ) {
$image_html = sprintf( '%s', esc_url( $image ), $term->name );
} else {
$image_html = '';
}

$genres = get_field( 'genres', $term );

if ( $genres ) {
$genres = wp_list_pluck( $genres, 'value' );

$genres = implode( ' ', $genres );
}

printf( '

',
$genres,
esc_url( get_term_link( $term->term_id ) ),
$image_html,
esc_html( $term->name ),
wp_trim_words( $term->description, 30 )
);

}
echo '

';
}

?>
In the above, replace field_6075947dd271b with the ID of the Checkbox-type custom field (genres, in this example). This can be obtained by clicking Screen Options on the Edit Field Group admin page and ticking Field Keys.
JavaScript:
jQuery(document).ready(function($) {
if(window.angular) return;

// init Isotope
var $grid = $('.series-grid').isotope({
// specifies which child elements will be used as item elements in the layout
itemSelector: '.series-grid-item',

// sets item positions in percent values, rather than pixel values
percentPosition: true,

// lays out items to (mostly) maintain horizontal left-to-right order
horizontalOrder: true,

masonry: {
// use outer width of grid-sizer for columnWidth
columnWidth: '.grid-sizer',

// horizontal space between items
gutter: '.gutter-sizer'
}
});

// filter items on button click
$('.filter-button-group').on( 'click', 'button', function() {
var filterValue = $(this).attr('data-filter');
$grid.isotope({ filter: filterValue });

$(this)
.parent('div')
.find('button')
.removeClass('active');

$(this).addClass('active');
});
});
Create/edit a Stylesheet at Manage > Stylesheets and add:
.filter-button-group {
display: flex;
justify-content: center;
}

.filter-button-group button {
padding: 10px 15px;
margin-bottom: 10px;
background-color: #F8F8F8;
background-image: linear-gradient( hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.1) );
border: 1px solid #222;
margin-left: -1px;
border-radius: 0;
}

.button-group button:first-child {
border-radius: 5px 0 0 5px;
}

.button-group button:last-child {
border-radius: 0 5px 5px 0;
}

button.active {
background-color: #19F;
color: white;
}

button:enabled {
cursor: pointer;
}

.series-grid {
clear: both;
margin-top: 30px;
}

.grid-sizer {
width: 23.875%;
}

.series-grid-item {
width: 23.875%;
background-color: #161615;
margin-bottom: 30px;
}

.gutter-sizer {
width: 1.5%;
}

.series-grid-item a {
display: block;
position: relative;
overflow: hidden;
text-align: center;
}

.series-grid-item img {
position: relative;
display: block;
}

.series-grid-item a:hover {
background: #000;
}

.series-grid-item a:hover img {
opacity: 0.4;
}

.series-grid-item .series-overlay {
position: absolute;
left: 0;
width: 100%;
top: auto;
bottom: 0;
padding: 1em;
background: rgba(255,255,255,0.8);
color: #3c4a50;
transition: transform 0.35s;
transform: translate3d(0,100%,0);
backface-visibility: hidden;
display: block;
}

.series-grid-item a:hover .series-overlay {
transform: translate3d(0,0,0);
}

.series-grid-item h2 {
display: inline-block;
transition: transform 0.35s;
transform: translate3d(0,200%,0);
font-size: 14px;
}

.series-grid-item h2,
.series-grid-item .series-description {
margin: 0;
}

.series-grid-item .series-description {
width: 100%;
position: absolute;
left: 0;
bottom: 7em;
padding: 0 2em;
color: #fff;
opacity: 0;
transition: opacity 0.35s;
-webkit-backface-visibility: hidden;
}

.series-grid-item a:hover h2 {
transition-delay: 0.05s;
transform: translate3d(0,0,0);
}

.series-grid-item a:hover .series-description {
opacity: 1;
}
Step 5
Install and activate My custom functionality plugin.
Connect to your server using a FTP client.
Upload isotope.pkgd.min.js to assets/js directory.
In the plugin’s main PHP file, inside custom_enqueue_files() add
if ( is_page( 'series' ) ) {
wp_enqueue_script( 'isotope', plugin_dir_url( __FILE__ ) . 'assets/js/isotope.pkgd.min.js', [], '3.0.6', true );
}
At the end of the file, add
add_image_size( 'featured_image_series', 500, 333, true );
Regenerate thumbnails if necessary.
That’s it!
Check the Page on the frontend and it should show a filterable taxonomy terms grid.
Note: The items will appear one below the other in the Oxygen editor.
References

Checkbox

get_field_object()


https://isotope.metafizzy.co/layout-modes/masonry.html
https://tympanus.net/Development/HoverEffectIdeas/

Nos experts se tiennent à votre disposition
pour répondre à vos questions et vous conseiller
dans votre projet digital.

Vous souhaitez développer une application ?

Envie d’échanger avec l’un de nos experts ? Besoin d’en savoir plus ?
En savoir plus

Recevez notre newsletter

La protection des données nous tient à cœur. JAG utilise les informations que vous fournissez afin de vous proposer des informations et du contenu pertinent sur nos produits et services. Vous pouvez vous désinscrire de ce type de communications à tout moment. Pour plus d'informations, consultez notre politique de confidentialité
© 2022 JAG Consulting, sas. Tous droits réservés.
© 2022 JAG Consulting, sas. Tous droits réservés.
4.8
Lire les 51 avis
google
Brieuc Pauly
08/09/2022

Créative, dynamique et très professionnelle, c'est à mon sens les piliers qui soutiennent cette équipe talentueuse ! Une agence à taille humaine qui privilégie la qualité et le résultat. Alors si vous souhaitez le meilleur pour votre communication adressez vous les yeux fermés à ces passionnés, plus que compétents ! (Translated by Google) Creative, dynamic and very professional, these are in my opinion the pillars that support this talented team! A human-sized agency that favors quality and results. So if you want the best for your communication, turn your eyes closed to these enthusiasts, who are more than competent!

google
Amaury Tardier
08/09/2022

Merci à Julien et son équipe, plus que satisfait par le travail fourni ! Je recommande vivement ! (Translated by Google) Thanks to Julien and his team, more than satisfied with the work provided! I highly recommend !

Ravi de travailler avec l'équipe JAG pour la gestion de mon site de e-Commerce. Equipe réactive et toujours pleine de bonnes idées pour améliorer les performances du site (Translated by Google) Glad to work with the JAG team for the management of my e-Commerce site. Responsive team always full of good ideas to improve the performance of the site

Merci à Julien pour son accompagnement dans mon projet, je recommande à 200% c est le Top (Translated by Google) Thanks to Julien for his support in my project, I recommend 200% it is the top

Excellente agence. Equipe est très pro, à l'écoute et de bon conseils. (Translated by Google) Excellent agency. The team is very professional, attentive and gives good advice.

Temps de réponse hors pair quand il y a eu un pb sur mon site, je vous recommande chaleureusement Julien :-) (Translated by Google) Unparalleled response time when there was a problem on my site, I warmly recommend Julien :-)

Charger plus
listarrow-right
Julien

Julien

Votre conseiller

I will be back soon

Une question ?

Julien
Bonjour ! Je suis Julien.
Comment puis-je vous aider?
Démarrer la conversation:
chat Live Chat