Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Im trying to use Isotope(http://isotope.metafizzy.co/) to filter my Wordpress posts, http://i44.tinypic.com/fco55k.jpg this is how my site looks like, i would like to filter posts depending on a post category so i need to add a class name to each post and then filter it using isotope

  <li><a href="#" data-filter="*">show all</a></li>
  <li><a href="#" data-filter=".design">design</a></li>
  <li><a href="#" data-filter=".typo">typography</a></li>

those are the names of my categories, and then i would like to add class name of a post depending on a category he is in.

<div id="main">
          <?php
          $args = array('orderby' => 'rand' );
          $random = new WP_Query($args); ?>
          <?php if(have_posts()) : ?><?php while($random->have_posts()) : $random->the_post(); ?>
         <a href="<?php the_permalink() ?>"> <div id="img" class="<?php  $category = get_the_category(); 
                echo $category[0]->cat_name; ?>">
            <?php 
                the_post_thumbnail();?>

            <h1><?php the_title(); ?></h1>
</div></a>

and javascript im using

    <script type="text/javascript">
jQuery(window).load(function(){
jQuery('#main').isotope({
  masonry: {
    columnWidth: 20
  },

});
$('#filters a').click(function(event){
  var selector = $(this).attr('data-filter');
  $('#main').isotope({ filter: selector });
  return false;
});
});

</script>
share|improve this question
    
Welcome to WPSE! Could you please clarify your question, to better explain what exactly your problem, issue, or question is? What are you trying to accomplish? What isn't working correctly/as expected? –  Chip Bennett Mar 8 '12 at 21:03
3  
No really a WordPress question. Go checkout the isotope docs. Your markup is not correct, the posts need to be wrapped in a div class that corresponds to the classes in the filter menu. –  Chris_O Mar 8 '12 at 21:32
    
isotope works just fine all my post are nicely floated using it, but i would like to filter posts depending on a post category so i need to add a class name to each post and then filter it using isotope –  dinosauuur Mar 8 '12 at 21:41
    
"i would like to filter posts depending on a post category so i need to add a class name to each post and then filter it using isotope" - Please update your question with this information, as it much more succinctly articulates what you're trying to accomplish. –  Chip Bennett Mar 8 '12 at 22:18
add comment

5 Answers

up vote 2 down vote accepted

Not sure you got Isotope and filters working yet ??

There are 2 things I think you missed

  1. the Filters need to be wrapped in a class (so that the jquery can be actioned by the click on the a links) like so:

    <ul id="options">
    <li><a href="#" data-filter="*">show all</a></li>
    <li><a href="#" data-filter=".web">web</a></li>
    <li><a href="#" data-filter=".mobile">mobile</a></li>
    </ul>
    

NB the data-filter are CaSe sensitive (so they won't work if they don't match your WordPress categories or whatever you use.

  1. The isotope jquery needs to be made safe for WordPress - to run in no-conflict mode

Here's the original code from Isotope documentation

// filter items when filter link is clicked
$('#filters a').click(function(){
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
return false;
});

Here's the code changed for WordPress

// filter items when filter link is clicked
jQuery('#options a').click(function(){
var selector = jQuery(this).attr('data-filter');
mycontainer.isotope({ filter: selector });
return false;
});

NB put this in after the rest of your isotope script and note that #options is the class from your filter list in the HTML :)

You can see it working at damien.co/isotope

Hope that helped you?

share|improve this answer
add comment

First, wrap your post output in a <div>, and add the <?php post_class(); ?> template tag to that <div>.

So, change this:

<a href="<?php the_permalink() ?>"> <div id="img" class="<?php  $category = get_the_category(); echo $category[0]->cat_name; ?>">
    <?php the_post_thumbnail();?>

    <h1><?php the_title(); ?></h1>
</div></a>

....to this:

<div <?php post_class(); ?>
    <a href="<?php the_permalink() ?>"> <div id="img">
        <?php the_post_thumbnail();?>

        <h1><?php the_title(); ?></h1>
    </div></a>
</div>

Now, if you read the post_class() Codex entry (linked above), you'll see that, among other classes, this template tag applies a category-{slug} class. (For your example categories, post_class() would add category-design or category-typo.

So then, you should just need to target category-{slug} to implement the isotope filter.

share|improve this answer
1  
You can use post_class() for a elements too. No need for an extra div. –  toscho Mar 8 '12 at 22:48
    
True; you can put post_class() wherever you want, really - as long as it is within the Loop. :) If the Isotope filter needs the class to be applied to an anchor, by all means, put it inside an <a> tag. –  Chip Bennett Mar 8 '12 at 22:53
    
Putting a code tag inside the divtag fixed the problem for me! Thank you very much! –  dinosauuur Mar 8 '12 at 22:58
add comment

You may want to use this function:

Place this in your functions.php

function isotope_categories() {

        $categories = get_categories();

        $html = '<ul class="filters option-set" data-option-key="filter">';
        $html .= '<li><a href="#filter" data-option-value="*" class="selected">All items</a></li>';

        foreach ($categories as $category) {

            $html .= "<li><a href='#filter' data-option-value='.category-{$category->category_nicename}'>{$category->cat_name}</a></li>";   
        }

        $html .= '</ul>';

        echo $html;
    }

and then call this function in the file where your isotope container is.

Like:

<nav class="options">                       
    <?php isotope_categories() ?>
</nav>  

It will output the correct markup for isotope

So if you create new posts in the backend of Wordpress and link categories to them they will show up and be filterable

share|improve this answer
add comment

I too have been attempting to integrate the jQuery Isotope plugin with WP when I stumbled upon this topic. If you still need help here's how it worked. My method was a little different since I have created a custom post type of projects that I wanted to be filtered by the projects_categories which is a custom taxonomy.

The page template needed the following php for the #projects-filter list and the #projects div to be generated.

<?php
$terms = get_terms('project_categories');
$count = count($terms);
if ( $count > 0 ){
echo '<ul id="projects-filter">';
echo '<li><a href="#" data-filter="*">All</a></li>';
foreach ( $terms as $term ) {
    $termname = strtolower($term->name);  
    $termname = str_replace(' ', '-', $termname);  
    echo '<li><a href="#" data-filter="' . '.' . $termname . '">' . $term->name . '</a></li>';
}
echo '</ul>';
}
?>

<?php 
    $loop = new WP_Query(array('post_type' => 'projects', 'posts_per_page' => -1));
    $count =0;
?>

<div id="project-wrapper">
    <div id="projects">

    <?php if ( $loop ) : 

        while ( $loop->have_posts() ) : $loop->the_post(); ?>

            <?php
            $terms = get_the_terms( $post->ID, 'project_categories' );

            if ( $terms && ! is_wp_error( $terms ) ) : 
                $links = array();

                foreach ( $terms as $term ) 
                {
                    $links[] = $term->name;
                }
                $links = str_replace(' ', '-', $links); 
                $tax = join( " ", $links );     
            else :  
                $tax = '';  
            endif;
            ?>

            <?php $infos = get_post_custom_values('wpcf-proj_url'); ?>

            <div class="project-item <?php echo strtolower($tax); ?>">
                <div class="thumb"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail( 'projects-thumb' ); ?></a></div>
                <h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
                <p class="excerpt"><a href="<?php the_permalink() ?>"><?php echo get_the_excerpt(); ?></a></p>
                <p class="links"><a href="<?php echo $infos[0]; ?>" target="_blank">Live Preview →</a> <a href="<?php the_permalink() ?>">More Details →</a></p>
            </div>

        <?php endwhile; else: ?>

        <div class="error-not-found">Sorry, no portfolio entries for while.</div>

    <?php endif; ?>


    </div>

    <div class="clearboth"></div>

</div> <!-- end #project-wrapper-->

And here's the javascript that works the magic.

jQuery(document).ready(function(){
    var mycontainer = jQuery('#projects');
    mycontainer.isotope({ 
        filter: '*',
        animationOptions: {
            duration: 750,
            easing: 'liniar',
            queue: false,
        }
    }); 

    jQuery('#projects-filter a').click(function(){ 
        var selector = jQuery(this).attr('data-filter'); 
        mycontainer.isotope({ 
            filter: selector,
            animationOptions: {
                duration: 750,
                easing: 'liniar',
                queue: false,
            } 
        }); 
      return false; 
    });
});
share|improve this answer
    
Hello Curtis, I am interested to your answer, I tried your code and looks like the transition is not that cool, please check if I am missing something. –  markyeoj Aug 13 '13 at 7:52
add comment

Add the animationEngnine: 'jquery' - and the animation will be smoother.

var mycontainer = jQuery('#projects');
mycontainer.isotope({ 
    filter: '*',
    animationEngine: 'jquery',
    animationOptions: {
    duration: 350,
    easing: 'linear',
    queue: true
    }
}); 

jQuery('#projects-filter a').click(function(){ 
    var selector = jQuery(this).attr('data-filter'); 
    mycontainer.isotope({ 
        filter: selector,
        animationOptions: {
            duration: 350,
            easing: 'linear',
            queue: true,
        } 
    }); 
  return false; 
});
share|improve this answer
    
This isn't an answer to the question... –  ialocin Dec 14 '13 at 22:34
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.