0

I am using the bootstrap nav tab. What I am doing is, I have a custom post type and I have created the custom category. I have 8 categories and each category has 10 posts.

I have to display the category name in the tab and post display inside the tab. I am getting the category name in the tab but not getting the post.

Below is the UI part

enter image description here

function dictionarytabview(){
global $post;
 $custom_terms = get_terms('dictionary_cats');
$data='<nav> <div class="nav nav-tabs" id="nav-tab" role="tablist">';
foreach($custom_terms as $custom_term) {
$data.='<button class="nav-link" id="'.$custom_term->slug.'" data-bs-toggle="tab" data-bs-target="'.$custom_term->slug.'" type="button" role="tab" aria-controls="'.$custom_term->slug.'" aria-selected="true">'.$custom_term->name.'</button>';
}
$data.='</div></nav>';

  $args = array('post_type' => 'dictionary',
        'tax_query' => array(
            array(
                'taxonomy' => 'dictionary_cats',
               // 'field' => 'slug',
                'terms' => $custom_term->slug,
            ),
        ),
     );

     $loop = new WP_Query($args);
     if($loop->have_posts()) {
     $data.='<div class="tab-content" id="nav-tabContent">';
        while($loop->have_posts()) : $loop->the_post();
            $data.='<div class="tab-pane" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                          <div class="">
                          <h4>'.get_the_title().'</h4>
                          <p>'.get_the_content().'</p>
                          </div>
                  </div>';
        endwhile;
        $data.='</div>';

     }

wp_reset_query();
return $data;

}

add_shortcode( 'dictionary-tabview', 'dictionarytabview');

Second way

$data='';
$custom_terms = get_terms('dictionary_cats');
 $data='<nav> <div class="nav nav-tabs" id="nav-tab" role="tablist">';


foreach($custom_terms as $custom_term) {
    $data.='<button class="nav-link"  data-bs-toggle="tab" data-bs-target="'.$custom_term->slug.'" type="button" role="tab" aria-controls="'.$custom_term->slug.'" aria-selected="true">'.$custom_term->name.'</button>';
}
 $data.='</div></nav>';
 $data.='<div class="tab-content" id="nav-tabContent">';
foreach($custom_terms as $custom_term) {
   $args = array('post_type' => 'dictionary',
        'tax_query' => array(
            array(
                'taxonomy' => 'dictionary_cats',
                'field' => 'slug',
                'terms' => $custom_term->slug,
            ),
        ),
     );

     $loop = new WP_Query($args);
     if($loop->have_posts()) {            
        $data.='<div class="tab-pane fade" id="'.$custom_term->slug.'" role="tabpanel" aria-labelledby="'.$custom_term->slug.'">';

        while($loop->have_posts()) : $loop->the_post();
                 $data.='<div class="dic-post-list d-table w-100">
                 <div class="dic-inner-box headingBox"><h4>'.get_the_title($post->ID).'</h4></div>
                 <div class="dic-inner-box"> <p>'.get_the_content($post->ID).'</p></div>
                 </div>';
        endwhile;

                 $data.='</div>';

     }

}
           $data.='</div>';

        

        $data.='<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script>
          jQuery(document).ready(function($){
             jQuery(".nav-tabs button.nav-link:first").addClass("active");
             jQuery(".tab-content .tab-pane:first").addClass("show active");

             $(".nav-tabs button").click(function () {
                $("button").removeClass("active");
                $(this).addClass("active");   
                var tabactive=$(this).attr("data-bs-target");
                $(".tab-content .tab-pane").removeClass("show active");
                var a=$("#" + tabactive );
                a.addClass("show active");

            });
          }); 

</script>';
13
  • Your shortcode is echo'ing all the output, this means your shortcode will break lots of things, can't be nested and may not appear in the correct pace. Shortcodes must return their content as a HTML string. They cannot output directly under any circumstances. Also, your post loop has no else statement so if no posts were found it prints nothing and you would never know about it
    – Tom J Nowell
    Aug 7 at 16:58
  • @TomJNowell, Thanks for the valuable information. Let me update the code. Aug 7 at 17:01
  • You can either use a variable to store the HTML then return it at the end, or capture the output using PHP output buffers then close the buffer and return its result at the end. I would also replace wp_reset_query with wp_reset_postdata and move it inside the if statement but after the loop. This does 2 things, wp_reset_query is meant to clean up after query_posts which you aren't using, and wp_reset_postdata cleans up after the_post. By moving it you avoid bugs when using the shortcode inside a nested WP_Query loop. I suspect the issue is your query found no posts
    – Tom J Nowell
    Aug 7 at 17:07
  • @TomJNowell, I have declared the $data variable and store the HTML code, and returning at the bottom. Aug 7 at 17:09
  • @TomJNowell, I also tried the second way(code updated in the question) and I am getting my post but not in tabs. Aug 7 at 17:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.