7 posts
  • Bought between 1 and 9 items
  • Exclusive Author
  • Has been a member for 1-2 years
  • 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
  • Bought between 1 and 9 items
  • Exclusive Author
  • Has been a member for 1-2 years
  • 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!

439 posts
  • Bought between 50 and 99 items
  • Europe
  • Exclusive Author
  • Has been a member for 2-3 years
  • Sold between 5 000 and 10 000 dollars
Pixelous says

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

7 posts
  • Bought between 1 and 9 items
  • Exclusive Author
  • Has been a member for 1-2 years
  • United Kingdom
paulgodney says

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

7 posts
  • Bought between 1 and 9 items
  • Exclusive Author
  • Has been a member for 1-2 years
  • United Kingdom
paulgodney says

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

37 posts
  • Referred between 10 and 49 users
  • Sold between 50 000 and 100 000 dollars
  • Exclusive Author
  • Microlancer Beta Tester
  • Bought between 10 and 49 items
  • Has been a member for 3-4 years
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
  • Microlancer Beta Tester
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Most Wanted Bounty Winner
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 3-4 years
XiaoThemes 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

439 posts
  • Bought between 50 and 99 items
  • Europe
  • Exclusive Author
  • Has been a member for 2-3 years
  • Sold between 5 000 and 10 000 dollars
Pixelous says

paulgodney, have send u a javascript/php part.

7 posts
  • Bought between 1 and 9 items
  • Exclusive Author
  • Has been a member for 1-2 years
  • 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

237 posts
  • Bangladesh
  • Bought between 1 and 9 items
  • Exclusive Author
  • Has been a member for 3-4 years
  • Most Wanted Bounty Winner
  • Referred between 10 and 49 users
  • Sold between 10 000 and 50 000 dollars
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