Support » Developing with WordPress » Isotope filtering on Custom Post Type

  • I’m having issues implementing the Isotope.js plugin in order to create a filtering UI for a custom post type.

    I’ve got a custom post type called “Stories,” and three custom taxonomies for this post type: topic, audience, and format.

    I’ve installed and began implementing Isotope on my archive-stories.php page template. I’ve got a

      for each custom taxonomy and all the terms are appearing, so that’s working. Only terms under the “topic” taxonomy are applied to the posts as a class, so that is not working. The posts are appearing, but the filtering capability is not working at all.

      Here’s the code for my archive-stories.php file:

      <?php
      /*
       * Stories ARCHIVE TEMPLATE
       *
       * For more info: http://codex.wordpress.org/Post_Type_Templates
      */
      ?>
      
      <?php get_header('stories'); ?>
      
      			<div id="content">
      
      				<div id="inner-content" class="wrap cf">
      
      					<main id="main" class="m-all t-2of3 d-5of7 cf" role="main" itemscope itemprop="mainContentOfPage" itemtype="http://schema.org/Blog">
      
      <!-- Filter Categories Loop -->
      
      <ul id="filters-topic">
          <?php
              $terms = get_terms('topic');
              $count = count($terms);
                  echo '<li><a href="javascript:void(0)" title="" data-filter=".all" class="active">All</a></li>';
              if ( $count > 0 ){
       
                  foreach ( $terms as $term ) {
       
                      $termname = strtolower($term->name);
                      $termname = str_replace(' ', '-', $termname);
                      echo '<li><a href="javascript:void(0)" title="" data-filter=".'.$termname.'">'.$term->name.'</a></li>';
                  }
              }
          ?>
      </ul>
      
      <ul id="filters-audience">
          <?php
              $terms = get_terms('audience');
              $count = count($terms);
                  echo '<li><a href="javascript:void(0)" title="" data-filter=".all" class="active">All</a></li>';
              if ( $count > 0 ){
       
                  foreach ( $terms as $term ) {
       
                      $termname = strtolower($term->name);
                      $termname = str_replace(' ', '-', $termname);
                      echo '<li><a href="javascript:void(0)" title="" data-filter=".'.$termname.'">'.$term->name.'</a></li>';
                  }
              }
          ?>
      </ul>
      
      <ul id="filters-format">
          <?php
              $terms = get_terms('format');
              $count = count($terms);
                  echo '<li><a href="javascript:void(0)" title="" data-filter=".all" class="active">All</a></li>';
              if ( $count > 0 ){
       
                  foreach ( $terms as $term ) {
       
                      $termname = strtolower($term->name);
                      $termname = str_replace(' ', '-', $termname);
                      echo '<li><a href="javascript:void(0)" title="" data-filter=".'.$termname.'">'.$term->name.'</a></li>';
                  }
              }
          ?>
      </ul>
      
      <!-- Custom Post Loop -->
      
      							
      							<div class="stories-container">
      
       <?php 
             $args = array( 'post_type' => 'stories', 'posts_per_page' => -1 );
             $loop = new WP_Query( $args );
             while ( $loop->have_posts() ) : $loop->the_post(); 
       
                $terms = get_the_terms( $post->ID, 'topic', 'audience', 'format' );						
                if ( $terms && ! is_wp_error( $terms ) ) : 
       
                    $links = array();
       
                    foreach ( $terms as $term ) {
                        $links[] = $term->name;
                    }
       
                    $tax_links = join( " ", str_replace(' ', '-', $links));          
                    $tax = strtolower($tax_links);
                else :	
      	      $tax = '';					
                endif; 
       
                echo '<div class="all stories-container-item '. $tax .'">';
                echo '<div class="thumbnail">'. the_post_thumbnail('exhibitions') .'</div>';
                echo '</a>';
                echo '<div class="stories-caption">';
                echo '<h2>'. the_title() .'</h2>';
                echo '<div>'. the_author_posts_link() .'</div>';
                echo '</div>'; 
                echo '</div>'; 
            endwhile; ?>
      
      							</div>
      
      						</main>
      
      				</div>
      
      			</div>
      
      <?php get_footer(); ?>

      Here’s how I’ve called Isotope in my scripts.js file:

      //Load Isotope 
      
        jQuery(function ($) {
      
        var $container = $('.stories-container'); //The ID for the list with all the blog posts
        $container.isotope({ //Isotope options, 'item' matches the class in the PHP
          itemSelector : '.stories-container-item', 
            layoutMode : 'masonry'
        });
      
        //Add the class selected to the item that is clicked, and remove from the others
        var $optionSets = $('#filters'),
        $optionLinks = $optionSets.find('a');
      
        $optionLinks.click(function(){
        var $this = $(this);
        // don't proceed if already selected
        if ( $this.hasClass('selected') ) {
          return false;
        }
        var $optionSet = $this.parents('#filters');
        $optionSets.find('.selected').removeClass('selected');
        $this.addClass('selected');
      
        //When an item is clicked, sort the items.
         var selector = $(this).attr('data-filter');
        $container.isotope({ filter: selector });
      
        return false;
        });
      
      });

      I’m not showing any console errors, so I think Isotope is loading, but has not been implemented properly. I’m using Bones as a starter theme, in case that makes a difference.

      Also, the default layout mode for Isotope is masonry, and I was hoping to use CSS flexbox to create an equal height grid of posts. Is there a way to override the layout mode?

      I’m developing locally right now, so I don’t have a URL to share yet.

Viewing 1 replies (of 1 total)
  • Moderator bcworkz

    (@bcworkz)

    Please share how isotope.pkgd.min.js and jQuery is being loaded for your page. I see how you’ve initialized it, but not how the libraries are loaded to begin with. Hint: you should be using wp_enqueue_script() for this.

    There are a number of layout modes besides masonry. I’d pick one that is most generic, then apply my own CSS to it.

Viewing 1 replies (of 1 total)
  • The topic ‘Isotope filtering on Custom Post Type’ is closed to new replies.