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