7 posts
  • 3 Years of Membership
  • Collector Level 1
  • Exclusive Author
  • United Kingdom
paulgodney
says

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

7 posts
  • 3 Years of Membership
  • Collector Level 1
  • Exclusive Author
  • United Kingdom
paulgodney
says

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!

438 posts
  • 3 Years of Membership
  • Author Level 4
  • Collector Level 3
  • Exclusive Author
Pixelous
says

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

7 posts
  • 3 Years of Membership
  • Collector Level 1
  • Exclusive Author
  • United Kingdom
paulgodney
says

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

7 posts
  • 3 Years of Membership
  • Collector Level 1
  • Exclusive Author
  • United Kingdom
paulgodney
says

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

38 posts
  • Affiliate Level 3
  • Author Level 7
  • Beta Tester
  • Collector Level 2
+4 more
wpstrong
says

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">
154 posts WordPress Wizard
  • Weekly Top Seller
  • Elite Author
  • Featured Author
  • Featured Item
+6 more
CODE9RS
says

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

438 posts
  • 3 Years of Membership
  • Author Level 4
  • Collector Level 3
  • Exclusive Author
Pixelous
says

paulgodney, have send u a javascript/php part.

7 posts
  • 3 Years of Membership
  • Collector Level 1
  • Exclusive Author
  • United Kingdom
paulgodney
says

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

248 posts
  • 4 Years of Membership
  • Affiliate Level 2
  • Author Level 5
  • Collector Level 1
+2 more
dmsumon
says

paulgodney, have send u a javascript/php part.

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

by
by
by
by
by
by