WordPress and isotope filtering

3 Views

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.

Read More
<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>
Post Views: 3

Related posts

Leave a Reply

5 comments

  1. 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?

  2. 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

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

  4. 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.

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