How to integrate Isotope with WordPress Step by Step Guide?

geekerhub

Updated on:

integrate Isotope with WordPress

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!!!

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

6 thoughts on “How to integrate Isotope with WordPress Step by Step Guide?”

  1. Najlepsza aplikacja do kontroli rodzicielskiej, aby chronić swoje dzieci – potajemnie tajny monitor GPS, SMS-y, połączenia, WhatsApp, Facebook, lokalizacja. Możesz zdalnie monitorować aktywność telefonu komórkowego po pobraniu i zainstalowaniu apk na telefonie docelowym.

  2. Może to być denerwujące, gdy twoje relacje są zakłócone, a jej telefonu nie można śledzić. Teraz możesz łatwo wykonać tę czynność za pomocą aplikacji szpiegowskiej. Te aplikacje monitorujące są bardzo skuteczne i niezawodne i mogą określić, czy twoja żona cię oszukuje.

  3. Szpiegowskie telefonu – Ukryta aplikacja śledząca, która rejestruje lokalizację, SMS-y, dźwięk rozmów, WhatsApp, Facebook, zdjęcie, kamerę, aktywność w Internecie. Najlepsze do kontroli rodzicielskiej i monitorowania pracowników. Szpiegowskie Telefonu za Darmo – Oprogramowanie Monitorujące Online.

Leave a Comment