Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I am using an Isotope for my Gallery,I want to use a custom menu so I can easily exclude and include categories if I want.. so far I am using a code to retrieve all the categories.

$terms = get_terms('project_categories');
$count = count($terms);
if ( $count > 0 ){
echo '<div class="the_filter"> <ul id="projects-filter" class="clearfix">';
echo '<li><a href="#" data-filter="*">All</a></li>';
foreach ( $terms as $term ) {
    $termname = strtolower($term->name);  
    $termname = str_replace(' ', '-', $termname);       
    if ($termname=="ux"):
    echo '<li><a href="#" data-filter="' . '.' . $termname . '" class="active">' . $term->name . '</a></li>';
    else:
    echo '<li><a href="#" data-filter="' . '.' . $termname . '">' . $term->name . '</a></li>';
    endif;
    }
echo '</ul> </div>';
}

Is there a way to use a wordpress menu as Isotope filter?

Updated Code

<?php $loop = new WP_Query(array('post_type' => 'projects', 'posts_per_page' => -1));    
 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); ?> isotope-item">
                        <div class="image">
                            <?php the_post_thumbnail( 'projects-thumb' ); ?>
                        <a class="gallery-whole-link" href="<?php the_permalink();?>" title="<?php the_title();?>"></a>
                        </div>
                    </div>

        <?php endwhile; else: ?>
    <?php endif; ?>

Script:

    <script>
        jQuery(document).ready(function(){
        var mycontainer = jQuery('#projects');
            mycontainer.isotope({ 
                filter: '.ux',
                animationOptions: {
                    duration: 700,
                    easing: 'easeOutQuad',
                    queue: false,
                }
            }); 

            jQuery('#projects-filter a').click(function(){
            jQuery('#projects-filter a.active').removeClass('active');
            var selector = jQuery(this).attr('data-filter');
            mycontainer.isotope({ filter: selector });
            jQuery(this).addClass('active');
            return false;
            });

            jQuery('li[class^="filter-cat-"] a').click( function(e) {
            e.preventDefault();
            var classes = jQuery(this).attr('class').split(' ');
            jQuery.each(classes, function(index, value) {
            if ( value.indexOf('filter-cat-') != -1 ) {
            var slug = value.replace('filter-cat-', '');
            // change '#gallery' according to the real container of your isotope gallery
            jQuery('#projects').isotope({ filter: '.' + slug });
            return false;
                      }
                    });
                 });

        });


    </script>
share|improve this question
    
There are some error on you code. 1) $links = str_replace(' ', '-', $links); you use str_replace on $links that's an array. 2) you shoul use terms slug, instad of names, this will simplify your code and avoid errors like the previous. 3) In the isotope script, you use filter: '.ux' but I can't see any ux class on your items... However, I've deleted my answer because I understand was wrong: I don't know isotope very well. –  G. M. Sep 5 '13 at 18:27

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.