- This topic has 13 replies, 10 voices, and was last updated 7 years, 9 months ago by
.
-
Posts
-
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!
John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography
Nice new avatar! Stay safe out there!
John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography
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');
Nice tutorial, thanks!
Thus the heavens and the earth were completed in all their vast array. Genesis 2
We've found this link to come in extremely handy for all that is isotope!:)
3200 Creative – Genesis design and development specialists | 3200 Goodies – Design and development blog
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
Great function Travis. Thanks for posting.
John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography
Hi RavenManiac
If you are still looking a built-in Portfolio, Here it is https://llamapress.com/create-filterable-portfolio-in-genesis/#comment-37. I have been finding last few days the filterable portfolio that is not too complicate for someone who don't know about php and javascript. I've found one tutorial which works for my website. I use Executive Pro theme.
Thanks for your reply. Yes, unfortunately, I'm still screwing around with a filterable portfolio. I was testing Go Portfolio (http://codecanyon.net/item/go-responsive-portfolio-for-wp/5741904), and it seemed to be working well, but then a WP update broke it and I can't figure out what's wrong.
Now, I'm thinking about using Sridhar Katakam's tutorial instead, in hopes that it'll be less prone to breakage with future WP updates. Can you post a link to your portfolio page so I can see what it looks like?
Also, if anyone else has any advice on this subject I'd really love to hear it as I seem to be spinning my wheels with this particular problem.
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.