Isotope Filtering pulling my hair out

Hi guys, thanks for your time to hopefully help me! Ok so I got isotope working fine and everything is looking good. I am having an issue getting the filtering to work. So basically I have a custom post type called ‘projects’ with a custom taxonomy called ‘project-types’.

So to create the nav list I have the following in my functions.php file:

function isotope_categories() {
        $taxonomy = 'project-types';
        $tax_terms = get_terms($taxonomy);

echo '

’; echo ‘
• All items
’; foreach ($tax_terms as $tax_term) { echo ‘
• ’ . ‘name)) . ’”>’ . $tax_term->name . ‘
’; } echo ‘

and then calling it in my page with:

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

I then have my custom loop for the actual items:

    <div class="row" id="work"> 
        <div id="work-thumbs">

    <?php query_posts( array ( 'posts_per_page' => -1, 'post_type' => array('projects') ) ); ?>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

        <article class="work-entry">
            <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
                <div class="work-meta">
                <?php $terms = get_terms("project-types");
                                 $count = count($terms);
                                 if($count > 0)
                                     {
                                         echo '<p class="small">';
                                         foreach ($terms as $term) 
                                             {
                                                 echo $term->name. '   ';
                                             }
                                         echo '</p>';
                                     }
                ?>                    
            <h2><a href="<?php the_permalink(); ?>">&raquo <?php the_title(); ?></a></h2></div>
        </article>

    <?php endwhile; endif; ?>
    <?php wp_reset_query(); ?>

        </div><!--END latest-posts-->
    </div><!--row-->

and then hooking it up in my functions.js file with:

jQuery(window).load(function(){
    jQuery('#work-thumbs').isotope({
      // options
      itemSelector : '.work-entry',
      layoutMode : 'masonry'
     });
});

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

So isotope works (responsively etc) BUT the filters do not do anything at all. If someone could give me a pointer on where I am going wrong I would me super duper appreciative! Thanks again, Paul

for some reason the first block of code in my question won’t let me wrap the whole thing up in ‘pre’. It cuts off after the first ‘echo’. Hopefully you can still understand it!

Hi, I can give u a code that I use at my project, but it’s not tiny, so email?

Thank you, that would be great. my email is hello@paulgodney.co.uk

Anyone else see what’s gone wrong with me code? thanks

Hi Paul,

I see no clue for filter works on your code. The ’#filter a’ must have a markup like this:

<a href="#" data-filter=".taxonomyID">Taxonomyname</a>

and the article class must have taxonomyID

<article class="work-entry taxonomyID">

Hmmm… in one of my themes in the time to use the filter of Isotope I need to add a dot before the selector, like this:

jQuery("#myPortfolio").isotope({ filter: "." + selector });

Maybe helps you to figure it out!

Cheers, Rafael

paulgodney, have send u a javascript/php part.

Thanks guys, I’ll have a look and see if I can work it out from here!! cheers for all your help

Pixelous said
paulgodney, have send u a javascript/php part.

paulgodney will you send me the code? I also need this. Thank you