This topic contains 10 replies, has 8 voices, and was last updated by 
-
1. Download the isotope package then upload the jquery.isotope.min.js to a folder titled “lib” in the child theme’s directory.
2. Create a file and name it isotope-parameters.js and place the following into it.
$(document).ready(function () {
//Set your isotope area
var $container = $('#container'),
filters = {};
//Set our items to be filtered, .post will work if you're using the post_class(); function
$container.isotope({
itemSelector : '.post'
});
// filter items when filter link is clicked
$('#filters a').click(function(){
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
return false;
})
});3. Upload that file to the child theme’s lib folder
4. Add this into the child theme’s functions.php. Note I had to deregister WP’s jquery and reload from google for some reason that I never worked out.
// Load scripts
add_action( ' wp_enqueue_scripts', 'child_load_scripts' );
function child_load_scripts() {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' );
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'isotope', CHILD_URL . '/lib/jquery.isotope.min.js', true );
wp_enqueue_script( 'parameters', CHILD_URL . '/lib/isotope-parameters.js', true );
}5. Create a page template and add this for the filter selector editing the “XXX” with the ID of the category whose children you want as filters
<ul id="filters" data-filter-group="color">
<li class="filter">Filter:</li>
<li><a href="#filter-topic-any" data-filter="" class="selected">All</a></li>
<?php
//Grab the child categories
$categories = get_categories( 'child_of=XXX' );
foreach ( $categories as $category ) {
//and format them for use as isotope filters
echo '<li><a href="#filter-topic-' . $category->slug . '" class="" data-filter=".category-' . $category->slug . '" ' . '>' . $category->name . '</a></li>';
}
?>
</ul>
6. Add your loop below that. The only important point here is to put the posts into a “<?php post_class(); ?>” div. For example something like
<?php $recent = new WP_Query( 'category_name=REPLACE_WITH_PARENT_CAT_NAME&posts_per_page=999&orderby=rand' );
while ( $recent->have_posts() ) : $recent->the_post(); ?>
<div <?php post_class(); ?>>
POST CONTENT STUFF
</div><!-- end .post-class -->
<?php endwhile;
wp_reset_query(); ?>7. Add the isotope style rules to your style sheet along with any other rules you want
/**** 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;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-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;
-o-transition-property: top, left, 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;
-o-transition-duration: 0s;
transition-duration: 0s;
}Hope that helps you get Isotope running in your project!
-
This topic was modified 6 months ago by
-
This topic was modified 6 months ago by
-
This topic was modified 6 months ago by
-
This topic was modified 6 months ago by
-
This topic was modified 6 months ago by
-
This topic was modified 6 months ago by
-
This topic was modified 6 months ago by
-
This topic was modified 6 months ago by
-
This topic was modified 6 months ago by
-
This topic was modified 6 months ago by
-
This topic was modified 6 months ago by
-
This topic was modified 6 months ago by
-
This topic was modified 6 months ago by
-
This topic was modified 6 months ago by
-
This topic was modified 6 months ago by
-
This topic was modified 6 months ago by
-
This topic was modified 6 months ago by
-
This topic was modified 6 months ago by
-
This topic was modified 6 months ago by
-
This topic was modified 6 months ago by
-
This topic was modified 6 months ago by
-
This topic was modified 6 months ago by
Great tip, John! It’s definitely one I’ll add to my bookmarks
Great tip! If I may add a slight modification (we all want a faster page loading, don’t we? )
// Loading Isotope only on the Page Template
function my_isotope()
{
if (is_page_template( 'my_page_template.php' ) && !is_admin() ) {
wp_enqueue_script( 'isotope', CHILD_URL . '/lib/jquery.isotope.min.js', true ); // Enqueue it!
wp_enqueue_script( 'parameters', CHILD_URL . '/lib/isotope-parameters.js', true ); // Enqueue it!
}
}
add_action('wp_head', 'my_isotope');
-
This reply was modified 6 months ago by
Marco. Reason: bad formatting
-
This reply was modified 6 months ago by
First and foremost, script loading should be done via wp_enqueue_scripts hook, not get_header.
Also, unless you want (err, have) to have Google CDN jQuery, there is no need to deregister jquery. So feel free to delete these lines:
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' );Often times, this method (switching to Google jQuery or otherwise) will break plugins (mainly because the Google CDN failed for this reason or that OR the person doesn’t update the version of jQuery like WordPress does for you). If I use Google CDN jQuery, here is my prefer method (gist):
So, here’s what I would recommend as for the script loading (assuming the previous function exists in your child theme):
https://gist.github.com/4504030
-
This topic was modified 6 months ago by
You must be logged in to reply to this topic.
