6.7 C
London
Tuesday, November 12, 2024

How to integrate Isotope with WordPress Step by Step Guide?

- Advertisement -spot_imgspot_img
- Advertisement -spot_imgspot_img

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

- Advertisement -spot_imgspot_img
Latest news
- Advertisement -spot_img
Related news
- Advertisement -spot_img

1 COMMENT

  1. Keep up the fantastic work! Kalorifer Sobası odun, kömür, pelet gibi yakıtlarla çalışan ve ısıtma işlevi gören bir soba türüdür. Kalorifer Sobası içindeki yakıtın yanmasıyla oluşan ısıyı doğrudan çevresine yayar ve aynı zamanda suyun ısınmasını sağlar.

LEAVE A REPLY

Please enter your comment!
Please enter your name here