How to filter custom post types by custom taxonomy using bootstrap tabs

I’m trying to display my custom post type by taxonomy categories. I managed to display all the tabs with my taxonomies and I can display all the custom post types on the page, but when it comes to filtering to display certain taxonomy posts when clicking on one of the tabs, it’s not working at all. Its always displaying all the posts on the page. Here is my code:

// Shortcode for Use Cases caption

add_shortcode(‘Use_Case’, ‘use_case_shortcode_query’);
function use_case_shortcode_query($atts, $content){
global $use_case_categories;
extract(shortcode_atts(array( // a few default values
‘posts_per_page’ => ’11’,
‘post_type’ => ‘use_cases’,
)
, $atts));

global $post;

$posts = new WP_Query(array( // a few default values
‘posts_per_page’ => ’11’,
‘post_type’ => ‘use_cases’
));
//print_r($posts);
$output = ”;

$out = ”;
$out .= ‘<ul class=”nav nav-tabs nav-justified”>’;
$out .= ‘<li class=”active”>’;
$out .= ‘<a data-toggle=”tab” href=”#all”>All</a>’;
$out .= ‘</li>’;
foreach($use_case_categories as $use_case_category):
$out .= ‘<li>’;
$out .= ‘<a href=”#’ . $use_case_category->slug . ‘” data-toggle=”tab”>’ . $use_case_category->name . ‘</a>’;
$out .= ‘</li>’;
endforeach;
$out .= ‘</ul>’;

$out .= ‘<div class=”tab-pane active” id=”all”‘;
$args = array(
‘post_type’ => ‘use_cases’,
‘posts_per_page’ -1,
‘orderby’ => ‘title’,
‘order’ => ‘ASC’
);
$all_films = new WP_Query( $args );
if ( $all_films->have_posts() ) :
while ( $all_films->have_posts() ) : $all_films->the_post();
$out .= ‘<a href=’.get_post_meta($post->ID, “location”, true).’><div class=”vce-row vce-element–has-background vce-row–col-gap-30 use_case_finance vce-row-equal-height vce-row-columns–top vce-row-content–top” id=”el-6cc8dbe6″ data-vce-do-apply=”all el-6cc8dbe6″><div class=”vce-content-background-container”></div><div class=”vce-row-content” data-vce-element-content=”true”><div class=”vce-col vce-col–md-100p vce-col–xs-1 vce-col–xs-last vce-col–xs-first vce-col–sm-last vce-col–sm-first vce-col–md-last vce-col–lg-last vce-col–xl-last vce-col–md-first vce-col–lg-first vce-col–xl-first” id=”el-f4a5f49c” data-vce-do-apply=”background el-f4a5f49c”><div class=”vce-col-inner” data-vce-element-content=”true” data-vce-do-apply=”padding margin border el-f4a5f49c”><div class=”vce-row-container”><div class=”vce-row vce-row–col-gap-30 vce-row-columns–top vce-row-content–top” id=”el-356c02e5″ data-vce-do-apply=”all el-356c02e5″><div class=”vce-row-content” data-vce-element-content=”true”><div class=”vce-col vce-col–md-100p vce-col–xs-1 vce-col–xs-last vce-col–xs-first vce-col–sm-last vce-col–sm-first vce-col–md-last vce-col–lg-last vce-col–xl-last vce-col–md-first vce-col–lg-first vce-col–xl-first” id=”el-4c08b71e” data-vce-do-apply=”background el-4c08b71e”><div class=”vce-col-inner” data-vce-element-content=”true” data-vce-do-apply=”padding margin border el-4c08b71e”><div class=”vce-row-container”><div class=”vce-row vce-row–col-gap-30 vce-row-columns–top vce-row-content–top” id=”el-86253324″ data-vce-do-apply=”all el-86253324″><div class=”vce-row-content” data-vce-element-content=”true”><div class=”vce-col vce-col–md-100p vce-col–xs-1 vce-col–xs-last vce-col–xs-first vce-col–sm-last vce-col–sm-first vce-col–md-last vce-col–lg-last vce-col–xl-last vce-col–md-first vce-col–lg-first vce-col–xl-first” id=”el-a1c3851f” data-vce-do-apply=”background el-a1c3851f”><div class=”vce-col-inner” data-vce-element-content=”true” data-vce-do-apply=”padding margin border el-a1c3851f”><div class=”vce-google-fonts-heading vce-google-fonts-heading–align-center vce-google-fonts-heading–color-b-72-72-72–45–5C00FF–FF7200″><div class=”vce-google-fonts-heading-wrapper”><div class=”vce-google-fonts-heading–background vce” id=”el-5c7b806f” data-vce-do-apply=”border background padding margin el-5c7b806f”><h2 class=”vce-google-fonts-heading-inner” style=”font-family: ” open=”” sans”;=”” font-weight:=”” 400;”=””>’.get_the_title().'</h2></div></div></div><div class=”vce-single-image-container vce-single-image–align-center”><div class=”vce vce-single-image-wrapper” id=”el-9632dafd” data-vce-do-apply=”all el-9632dafd”><figure><div class=”vce-single-image-inner”><img class=”vce-single-image” src=”http://ai.crafts-world.com/wp-content/uploads/2018/02/Second-home-page-design-Recovered_03.png” data-img-src=”http://ai.crafts-world.com/wp-content/uploads/2018/02/Second-home-page-design-Recovered_03.png” alt=”” title=”Second-home-page-design-Recovered_03″></div></figure></div></div><div class=”vce-google-fonts-heading vce-google-fonts-heading–align-center vce-google-fonts-heading–color-empty–45–5C00FF–FF7200″><div class=”vce-google-fonts-heading-wrapper”><div class=”vce-google-fonts-heading–background vce” id=”el-8f301bd3″ data-vce-do-apply=”border background padding margin el-8f301bd3″><div class=”vce-google-fonts-heading-inner” style=”font-family: ” open=”” sans”;=”” font-weight:=”” 300;”=””>’.get_the_content().'</div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></a></a>’;

$out .='</div>’;
$out .='</div>’;
endwhile;
endif;

foreach($use_case_categories as $use_case_category) {
$out .= ‘<div class=”tab-pane” id=” ‘.$use_case_category->slug.’ “>’;

$args = array(
‘post_type’ => ‘use_cases’,
‘posts_per_page’ -1,
‘orderby’ => ‘title’,
‘order’ => ‘ASC’,
‘tax_query’ => array(
array(
‘taxonomy’ => ‘type’,
‘field’ => ‘slug’,
‘terms’ => $use_case_category->slug
)
)
);
$films = new WP_Query( $args );

if ( $films->have_posts() ) :
while ( $films->have_posts() ) : $films->the_post();
$out .= ‘<a href=’.get_post_meta($post->ID, “location”, true).’><div class=”vce-row vce-element–has-background vce-row–col-gap-30 use_case_finance vce-row-equal-height vce-row-columns–top vce-row-content–top” id=”el-6cc8dbe6″ data-vce-do-apply=”all el-6cc8dbe6″><div class=”vce-content-background-container”></div><div class=”vce-row-content” data-vce-element-content=”true”><div class=”vce-col vce-col–md-100p vce-col–xs-1 vce-col–xs-last vce-col–xs-first vce-col–sm-last vce-col–sm-first vce-col–md-last vce-col–lg-last vce-col–xl-last vce-col–md-first vce-col–lg-first vce-col–xl-first” id=”el-f4a5f49c” data-vce-do-apply=”background el-f4a5f49c”><div class=”vce-col-inner” data-vce-element-content=”true” data-vce-do-apply=”padding margin border el-f4a5f49c”><div class=”vce-row-container”><div class=”vce-row vce-row–col-gap-30 vce-row-columns–top vce-row-content–top” id=”el-356c02e5″ data-vce-do-apply=”all el-356c02e5″><div class=”vce-row-content” data-vce-element-content=”true”><div class=”vce-col vce-col–md-100p vce-col–xs-1 vce-col–xs-last vce-col–xs-first vce-col–sm-last vce-col–sm-first vce-col–md-last vce-col–lg-last vce-col–xl-last vce-col–md-first vce-col–lg-first vce-col–xl-first” id=”el-4c08b71e” data-vce-do-apply=”background el-4c08b71e”><div class=”vce-col-inner” data-vce-element-content=”true” data-vce-do-apply=”padding margin border el-4c08b71e”><div class=”vce-row-container”><div class=”vce-row vce-row–col-gap-30 vce-row-columns–top vce-row-content–top” id=”el-86253324″ data-vce-do-apply=”all el-86253324″><div class=”vce-row-content” data-vce-element-content=”true”><div class=”vce-col vce-col–md-100p vce-col–xs-1 vce-col–xs-last vce-col–xs-first vce-col–sm-last vce-col–sm-first vce-col–md-last vce-col–lg-last vce-col–xl-last vce-col–md-first vce-col–lg-first vce-col–xl-first” id=”el-a1c3851f” data-vce-do-apply=”background el-a1c3851f”><div class=”vce-col-inner” data-vce-element-content=”true” data-vce-do-apply=”padding margin border el-a1c3851f”><div class=”vce-google-fonts-heading vce-google-fonts-heading–align-center vce-google-fonts-heading–color-b-72-72-72–45–5C00FF–FF7200″><div class=”vce-google-fonts-heading-wrapper”><div class=”vce-google-fonts-heading–background vce” id=”el-5c7b806f” data-vce-do-apply=”border background padding margin el-5c7b806f”><h2 class=”vce-google-fonts-heading-inner” style=”font-family: ” open=”” sans”;=”” font-weight:=”” 400;”=””>’.get_the_title().'</h2></div></div></div><div class=”vce-single-image-container vce-single-image–align-center”><div class=”vce vce-single-image-wrapper” id=”el-9632dafd” data-vce-do-apply=”all el-9632dafd”><figure><div class=”vce-single-image-inner”><img class=”vce-single-image” src=”http://ai.crafts-world.com/wp-content/uploads/2018/02/Second-home-page-design-Recovered_03.png” data-img-src=”http://ai.crafts-world.com/wp-content/uploads/2018/02/Second-home-page-design-Recovered_03.png” alt=”” title=”Second-home-page-design-Recovered_03″></div></figure></div></div><div class=”vce-google-fonts-heading vce-google-fonts-heading–align-center vce-google-fonts-heading–color-empty–45–5C00FF–FF7200″><div class=”vce-google-fonts-heading-wrapper”><div class=”vce-google-fonts-heading–background vce” id=”el-8f301bd3″ data-vce-do-apply=”border background padding margin el-8f301bd3″><div class=”vce-google-fonts-heading-inner” style=”font-family: ” open=”” sans”;=”” font-weight:=”” 300;”=””>’.get_the_content().'</div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></a></a>’;

$out .='</div>’;
endwhile;
wp_reset_query();

endif;
$out .='</div>’;

}

Read more here:: How to filter custom post types by custom taxonomy using bootstrap tabs

Leave a Reply

Your email address will not be published. Required fields are marked *