7 posts
  • Has been part of the Envato Community for over 2 years
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
  • Located in 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
  • Has been part of the Envato Community for over 2 years
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
  • Located in 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
  • Has been part of the Envato Community for over 2 years
  • Has sold $5,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Located in Europe
+1 more
Pixelous says

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

7 posts
  • Has been part of the Envato Community for over 2 years
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
  • Located in United Kingdom
paulgodney says

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

7 posts
  • Has been part of the Envato Community for over 2 years
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
  • Located in United Kingdom
paulgodney says

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

38 posts
  • Has referred 50+ members
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+3 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">
115 posts WordPress Wizard
  • Has sold $125,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+5 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
  • Has been part of the Envato Community for over 2 years
  • Has sold $5,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Located in Europe
+1 more
Pixelous says

paulgodney, have send u a javascript/php part.

7 posts
  • Has been part of the Envato Community for over 2 years
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
  • Located in 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

238 posts
  • Has been part of the Envato Community for over 3 years
  • Has referred 10+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 1+ items on Envato Market
+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