i have been following the instructions posted here https://www.aliciaramirez.com/2014/03/integrating-isotope-with-wordpress/ regarding how to integrate isotope filtering with my custom post type.

I currently completed all the stages on the instructions.

The category filter links are listed and bringing in the correct classes and data filters, whereas the array of posts which is displaying fine is not adding the category as a class name to the div as it should.

Here is my code for the filter buttons:

                <ul id="filters">
                    <li><a href="#" data-filter="*" class="selected">Everything</a></li>
                 <?php 
                 $terms = get_terms("project_categories"); // get all categories, but you can use any taxonomy
                 $count = count($terms); //How many are they?
                 if ( $count > 0 ){  //If there are more than 0 terms
                 foreach ( $terms as $term ) {  //for each term:
                 echo "<li><a href='#' data-filter='.".$term->slug."'>" . $term->name . "</a></li>n";
                 //create a list item with the current term slug for sorting, and name for label
                 }
                 } 
                 ?>
                </ul>

The only value i changed from the example in this was the term “category” and changed to “project_categories” which is my custom taxonomy. All displays and works okay.

Now for the part not working so well. Code for array of blog posts..

                    <?php $the_query = new WP_Query( 'posts_per_page=5' ); //Check the WP_Query docs to see how you can limit which posts to display ?>
                    <?php if ( $the_query->have_posts() ) : ?>
                        <div id="isotope-list">
                        <?php while ( $the_query->have_posts() ) : $the_query->the_post(); 
                     $termsArray = get_the_terms( $post->ID, "project_categories" );  //Get the terms for this particular item
                     $termsString = ""; //initialize the string that will contain the terms
                     foreach ( $termsArray as $term ) { // for each term 
                     $termsString .= $term->slug.' '; //create a string that has all the slugs 
                     }
                     ?> 
                     <div class="<?php echo $termsString; ?> item project home-project"> <?php // 'item' is used as an identifier (see Setp 5, line 6) ?>
                             <?php if ( has_post_thumbnail() ) { 
                                          the_post_thumbnail();
                                    } ?>
                     </div> <!-- end item -->
                        <?php endwhile;  ?>
                        </div> <!-- end isotope-list -->
                    <?php endif; ?>

Again i have only replaced “category” with “project_categories”. My project posts display fine, its just the class is not being added.

If i changed “project_categories” back to “category” it inserts the categories as classes fine.

All things point to it being my custom post type which is the problem, however i cannot find a reason. Im a bit lost here! Any ideas would be appreciated!

Read more here: WordPress Custom Post with Isotope filtering


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: