Skip to content

Instantly share code, notes, and snippets.

@sbbnm sbbnm/content-isotope.php

Last active Aug 29, 2015
Embed
What would you like to do?
isotope ....
<ul id="filters">
<li><a href="#" data-filter="*">Everything</a></li>
<?php
$terms = get_terms("category"); // get all categories, but you can use any taxonomy
$count = count($terms); //How many are they?
if ( $count > 0 ){ //If there are more than 0 terms
foreach ( $terms as $term ) { //for each term:
echo "<li><a href='#' data-filter='.".$term->slug."'>" . $term->name . "</a></li>\n";
//create a list item with the current term slug for sorting, and name for label
}
}
?>
</ul>
<?php $the_query = new WP_Query( 'posts_per_page=9' ); //Check the WP_Query docs to see how you can limit which posts to display ?>
<?php if ( $the_query->have_posts() ) : ?>
<div id="isotope-list">
<?php while ( $the_query->have_posts() ) : $the_query->the_post();
$termsArray = get_the_terms( $post->ID, "category" ); //Get the terms for this particular item
$termsString = ""; //initialize the string that will contain the terms
foreach ( $termsArray as $term ) { // for each term
$termsString .= $term->slug.' '; //create a string that has all the slugs
}
?>
<div class="<?php echo $termsString; ?> item">
<h3><?php the_title(); ?></h3>
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail();
} ?>
</div> <!-- end item -->
<?php endwhile; ?>
</div> <!-- end isotope-list -->
<?php endif; ?>
/*----------------------------------------------------------------------------------
register scripts used in theme
----------------------------------------------------------------------------------*/
function add_isotope() {
//Register styles
wp_register_style('isotope-css', get_stylesheet_directory_uri() . '/isotope.css' );
//Enqueue styles
wp_enqueue_style( 'isotope-css' );
//Register scripts
wp_register_script('imagesloaded', get_stylesheet_directory_uri() . '/js/imagesloaded.pkgd.min.js', array('jquery'), true );
wp_register_script('isotope', get_stylesheet_directory_uri() . '/js/isotope.pkgd.min.js', array('jquery'), true );
wp_register_script('isotope-query', get_stylesheet_directory_uri() . '/js/isotope-query.js', array('jquery', 'isotope') );
//Enqueue scripts
wp_enqueue_script('jquery');
wp_enqueue_script('masonry');
wp_enqueue_script('imagesloaded');
wp_enqueue_script('isotope');
wp_enqueue_script('isotope-query');
}
add_action('wp_enqueue_scripts', 'add_isotope');
<?php get_header(); ?>
<section class="content-isotope">
<div class="isotope group">
<?php if ( have_posts() ) : ?>
<div class="isotope-list">
<?php get_template_part( 'content-isotope', 'isotope') ?>
</div><!--/#isotope-list-->
<?php endif; ?>
</div><!--/.isotope-->
</section><!--/.content-isotope-->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
jQuery(function ($) {
//set the container that isotope will be inside of in a var
var container = document.querySelector('#isotope-list');
//create empty var isotope
var Isotope;
// initialize Isotope after all images have loaded
var $container = $('#isotope-list').imagesLoaded( function() {
$container.isotope({
// options
});
});
var $container = $('#isotope-list'); //The ID for the list with all the blog posts
$container.isotope({ //Isotope options, 'item' matches the class in the PHP
itemSelector : '.item',
layoutMode : 'masonry'
isOriginLeft: false
});
var container = document.querySelector('#isotope-list');
// init
var iso = new Isotope( container, {
// options
itemSelector: '.item',
});
//Add the class selected to the item that is clicked, and remove from the others
var $optionSets = $('#filters'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents('#filters');
$optionSets.find('.selected').removeClass('selected');
$this.addClass('selected');
//When an item is clicked, sort the items.
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
return false;
});
});
jQuery( function($) {
$('.isotope').isotope({
itemSelector: '.item',
masonry: {
columnWidth: 100
}
});
});
/* Start: Recommended Isotope styles */
.isotope-list{position: relative !important;
top: 50px !important;}
.filters{}
.item {width:25% !important;}
/**** Isotope Filtering ****/
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-ms-transition-property: -ms-transform, opacity;
-o-transition-property: -o-transform, opacity;
transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-ms-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
}
/* End: Recommended Isotope styles */
<?php get_header(); ?>
<section class="content">
<?php get_template_part('inc/page-title'); ?>
<div class="pad group">
<?php get_template_part('inc/featured'); ?>
<?php if ( have_posts() ) : ?>
<div class="post-list group">
<?php $i = 1; echo '<div class="post-row">'; while ( have_posts() ): the_post(); ?>
<?php get_template_part('content'); ?>
<?php if($i % 2 == 0) { echo '</div><div class="post-row">'; } $i++; endwhile; echo '</div>'; ?>
</div><!--/.post-list-->
<?php get_template_part('inc/pagination'); ?>
<?php endif; ?>
</div><!--/.pad-->
</section><!--/.content-->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.