1

I am trying to use isotope filtering (cool animations) with bootstrap tabs where each tab-pane has its own custom post-type query loop. For some reason, I have to click twice on the tabs to have the fitRows layout work. I use get_post_type() to get the post type for the data-category attribute in the content-archive.php file.

I have tried and/or implemented the list below.

  1. wrapped with on load function
  2. set max width and height for images
  3. imagesLoaded and layout (formerly isotope reLayout)
  4. hidden/show style options from isotope (remove transforms I believe but took it off as nothing changed and was using it to fix the overlapping issue but it is no more when using tab-pane as the container)
  5. using the same active class as bootstrap tabs

Here is the link to the site - https://bit.ly/3ryiifU

Here is my code:

jQuery(window).on('load', function() {
// init Isotope
let $fit_container = jQuery('.tab-pane').isotope({
  itemSelector: '.scroll-post',
  layoutMode: 'fitRows'
});

$fit_container.imagesLoaded().progress(function() {   
    $fit_container.isotope('layout');
});

// bind filter button click
jQuery('.nav-tabs li').on( 'click', 'a', function() {
  var filterValue = jQuery( this ).attr('data-filter');
  $fit_container.isotope({ filter: filterValue });
});

// change active class on buttons
    jQuery('.nav').each( function( i, navTabs ) {
      var $navTabs = $( navTabs );
      $navTabs.on( 'click', 'a', function() {
        $navTabs.find('.active').removeClass('active');
        jQuery( this ).addClass('active');
      });
    }); 
});

HTML/PHP

<main id="content" class="site-content">
<article class="container">
         <section class="row">
 <div id="primary" class="content-area col-sm-12 col-lg-9">
     

         <header class="page-header">
             <h1 class="page-title"><?php printf( esc_html__( 'Category: %s', 'wp-bootstrap-starter' ), '<span>' . single_cat_title( '', false ) . '</span>' ); ?></h1>
         </header><!-- .page-header -->

<?php
$cat = get_queried_object();
$slug = $cat->slug;
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;

$all_loop = new WP_Query( array( 
'category_name' => $slug, 
'post_type' => array('font','snipp','post'),
'posts_per_page' => 6,
'paged' => $paged
) ); 

$font_loop = new WP_Query( array( 
'category_name' => $slug,
'post_type' => 'font',
'posts_per_page' => 6,
'paged' => $paged
) ); 

$snipp_loop = new WP_Query( array( 
'category_name' => $slug,
'post_type' => 'snipp',
'posts_per_page' => 6,
'paged' => $paged
) ); 

$post_loop = new WP_Query( array( 
'category_name' => $slug,
'post_type' => 'post',
'posts_per_page' => 6,
'paged' => $paged
) ); 
?>
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li role="presentation" class="nav-item">
  <a class="nav-link active show is-checked" data-filter="*" data-bs-toggle="tab" data-bs-target="#all"  type="button" role="tab" aria-controls="all" aria-selected="true">All</a></li>

<?php if($font_loop->have_posts()): ?>
 <li role="presentation" class="nav-item">
 <a class="nav-link" data-filter=".font" data-bs-toggle="tab" data-bs-target="#font" type="button" role="tab" aria-controls="font" aria-selected="false">Fonts</a></li>
 <?php endif; ?>
<?php if($snipp_loop->have_posts()): ?>
 <li role="presentation" class="nav-item"><a class="nav-link"  data-filter=".snipp" data-bs-toggle="tab" data-bs-target="#snipp" type="button" role="tab" aria-controls="snipp" aria-selected="false">Snippets</a></li>
 <?php endif; ?>
<?php if($post_loop->have_posts()): ?>
 <li role="presentation" class="nav-item"><a class="nav-link" data-filter=".post" data-bs-toggle="tab" data-bs-target="#post" type="button" role="tab" aria-controls="post" aria-selected="false">Blog</a></li>
 <?php endif; ?>
</ul>
<div class="tab-content" id="myTabContent">
   <div role="tabpanel" class="tab-pane fade active show" id="all" aria-labelledby="all-tab">
<?php
if ( $all_loop->have_posts() ) :
while ( $all_loop->have_posts() ) : $all_loop->the_post(); 


             get_template_part( 'template-parts/content', 'archive' );

         endwhile;

         the_posts_navigation();

     else :

         get_template_part( 'template-parts/content', 'archive' );

     endif; ?>   
 </div><!-- #tabpanel-all-content -->
 <div role="tabpanel" class="tab-pane fade" id="font" aria-labelledby="font-tab">
 <?php
if ( $font_loop->have_posts() ) :
while ( $font_loop->have_posts() ) : $font_loop->the_post(); 
?>
<?php

             get_template_part( 'template-parts/content', 'archive' );

         endwhile;

         the_posts_navigation();

     else :

         get_template_part( 'template-parts/content', 'none' );

     endif; ?>
 </div><!-- tabpanel-font-content -->
 <div role="tabpanel" class="tab-pane fade" id="snipp" aria-labelledby="snipp-tab">
  <?php 
if ( $snipp_loop->have_posts() ) : 
while ( $snipp_loop->have_posts() ) : $snipp_loop->the_post(); 
?>
<?php

             get_template_part( 'template-parts/content', 'archive' );

         endwhile;

         the_posts_navigation();

     else :

         get_template_part( 'template-parts/content', 'none' );

     endif; ?>
 </div><!-- #tabpanel-snipp-content -->
 <div role="tabpanel" class="tab-pane fade" id="post" aria-labelledby="post-tab">
 <?php 
if ( $post_loop->have_posts() ) : 
while ( $post_loop->have_posts() ) : $post_loop->the_post(); 
?>
<?php

             get_template_part( 'template-parts/content', 'archive' );

         endwhile;

         the_posts_navigation();

     else :

         get_template_part( 'template-parts/content', 'none' );

     endif; ?>
 </div><!-- #tabpanel-post-content -->
 </div><!-- #tab-content -->
 </div><!-- #primary -->

<?php get_sidebar(); ?>


</section><!-- #row -->
</article><!-- #container -->
</main><!-- #content -->```

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.