How to integrate Isotope with WordPress Step by Step Guide?

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:
1) Enqueue Isotope Library (you need to enqueue isotope.min.js and isotope.js)
2) List categories as a filter
3) List post as a Masonry data
4) Initiate Isotope using jQuery
and WE ARE DONE!!!

1) 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' );

2) 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>

3) 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; ?>

4) 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'
        });
    });

Leave a Comment

Your email address will not be published. Required fields are marked *