The main concern of this post is to integrate Isotope Jquery Masonry Library with WordPress data like Posts or Pages or Custom Post Type.
We will use the post post type. Let’s consider that our data will have categories (categories will work as a filter) and the posts.
We need to follow this step to integrate Isotope with WordPress:
Initiate Isotope using jQuery
and WE ARE DONE!!!
Enqueue Isotope Library (you need to enqueue isotope.min.js and isotope.js)
List categories as a filter
List post as a Masonry data
Initiate Isotope using jQuery
and WE ARE DONE!!!
Enqueue Isotope Library
(you need to enqueue isotope.min.js and isotope.js)
You can download the isotope from the GitHub repository or you can use the CDN file too.
Download both the js files and put those files in a js folder of the active theme.
function enqueue_isotope_callback() {
wp_register_script( 'isotope-min', get_template_directory_uri().'/js/isotope.pkgd.min.js', array('jquery'), true );
wp_register_script( 'isotope', get_template_directory_uri().'/js/isotope.pkgd.js', array('jquery', 'isotope-min'), true );
wp_enqueue_script('isotope');
}
add_action( 'wp_enqueue_scripts', 'enqueue_isotope_callback' );List categories as a filter
<ul id="isotope-filter">
<li><a href="#" data-filter="*" class="selected">All</a></li>
<?php
$terms = get_terms("category");
if ( count($terms) > 0 ){
foreach ( $terms as $term ) {
echo "<li><a href='#' data-filter='.".$term->slug."'>" . $term->name . "</a></li>";
}
}
?>
</ul>List post as a Masonry data
<?php
$args = array('post_type' => 'post' );
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) : ?>
<div id="isotope-masonary">
<?php
while ( $the_query->have_posts() ) : $the_query->the_post();
$termsString = "";
$termsArray = get_the_terms( get_the_ID(), "category" );
foreach ( $termsArray as $term ) {
$termsString .= $term->slug.' ';
}
?>
<div class="<?php echo $termsString; ?> item">
<h3><?php the_title(); ?></h3>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?Initiate Isotope using jQuery
Need to add this jQuery snippet in a footer or custom jquery file to initiate isotope
jQuery(function ($) {
$('#isotope-masonary').isotope({
itemSelector : '.item',
layoutMode : 'masonry'
});
});