2

I'm trying to create a page that holds all categories of my custom post type as tabs, with a tab content.

I am able to display all the category names as tabs, but i need to run a query in each tab content area to the corresponding category.

So when I click on tab named "1" the tab content area should only show posts from the category belonging to the tab named "1".

My code so far:

  <?php
echo '<ul class="nav nav-tabs" role="tablist">';

 $args = array(
 'hide_empty'=> 1,
 'orderby' => 'name',
 'order' => 'ASC'
 );

$categories = get_categories($args);

  foreach($categories as $category) { 

    echo '<li><a href="#' . $category->name.'" role="tab" data-toggle="tab">' .      
    $category->name.'</a></li>';
    $cat_name = $category->name;

    } 
    echo '</ul>';
    echo '<div class="tab-content">';
      foreach($categories as $category) { 
        echo '<div class="tab-pane" id="' . $category->name.'">';


        ?>

 <?php 

     $the_query = new WP_Query(array(
      'post_type' => 'acme_product',
      'posts_per_page' => 100,
      'category_name' => $category->slug
        )); 
     while ( $the_query->have_posts() ) : 
     $the_query->the_post();
     ?>

            <h1><?php the_title(); ?></h1>

                   <?php 
    endwhile; 
   wp_reset_postdata();
   ?>   


    <?php } 
    echo '</div>';
     ?>

The problems is that each content area displays all post of every category.

The html ouput:

   <div class="container">

               <ul class="nav nav-tabs" role="tablist"><li><a href="#Audi" role="tab" data-toggle="tab">Audi</a></li><li><a href="#Skoda" role="tab" data-toggle="tab">Skoda</a></li></ul><div class="tab-content"><div class="tab-pane" id="Audi">

        <h1>fffffffffffff</h1>




<div class="tab-pane" id="Skoda">

        <h1>qqqqqqqqqqqqqqqqqqq</h1>




</div>                       
    </div>

Any suggestions?

3 Answers 3

2

Try 'category_name' => $category->slug instead of 'category_name' => $cat_name.

You are also missing wp_reset_postdata(); just after endwhile;.

5
  • I've added wp_reset_postdata(); and changede name to slug. I'm still getting all the posts under each tab. As I understand it this should add the post from the category in question for each category. I'm banging my head here.
    – TietjeDK
    Jul 16, 2014 at 22:48
  • I made an update to my answer. I noticed another small bug that would simply repeat the same category. Though that doesn't explain why it loads all posts. Could you link us to the output?
    – deflime
    Jul 16, 2014 at 22:53
  • Unfortunately I'm working on local host, so I can't provide a link. I also applied your changes. Still no dice.
    – TietjeDK
    Jul 16, 2014 at 23:04
  • Can you edit you question and post the html output?
    – deflime
    Jul 16, 2014 at 23:13
  • It turned out to be a missing closing tag. I can't believe I wasted 5 hours on this. I'm sorry for wasting your time - and I appreciate your help. Thx alot!
    – TietjeDK
    Jul 16, 2014 at 23:28
2

Try This code

<?php
echo '<ul class="nav nav-tabs" role="tablist">';
$args = array(
    'hide_empty'=> 1,
    'orderby' => 'name',
    'order' => 'ASC'
);
$categories = get_categories($args);
foreach($categories as $category) { 
    echo 
        '<li>
            <a href="#'.$category->slug.'" role="tab" data-toggle="tab">    
                '.$category->name.'
            </a>
        </li>';
}
echo '</ul>';

echo '<div class="tab-content">';
foreach($categories as $category) { 
    echo '<div class="tab-pane" id="' . $category->slug.'">';
    $the_query = new WP_Query(array(
        'post_type' => 'acme_product',
        'posts_per_page' => 100,
        'category_name' => $category->slug
    ));

    while ( $the_query->have_posts() ) : 
    $the_query->the_post();
    echo '<h1>';
        the_title();
    echo '</h1>';
    endwhile;

    echo '</div>';
} 
echo '</div>';
?>
3
  • Please add an explanation to your answer: why could that solve the problem?
    – fuxia
    Nov 9, 2014 at 0:38
  • hi! i edited the code the arranged in nice format i'm only add $category->slug to some part of the code i'm sure this code work 100/100 i use it in my navbar tab Nov 9, 2014 at 20:56
  • Please explain in your answer (not in a comment), what your code does and why it works.
    – fuxia
    Nov 9, 2014 at 21:42
-1
<?php
echo '<ul class="nav nav-tabs" role="tablist">';
$args = array(
    'taxonomy' => 'annualreports_category',
    'hide_empty'=>0,
    'orderby' => 'name',
    'order' => 'ASC'
);
$categories = get_categories($args);
foreach($categories as $category) { 
    echo 
        '<li>
            <span data-href="'.$category->slug.'" role="tab" data-toggle="tab">    
                '.$category->name.'
            </span>
        </li>';
}
echo '</ul>';

echo '<div class="investors-content">';
foreach($categories as $category) { 
    echo '<div class="tab-pane" id="' . $category->slug.'">';
    $catslug = $category->slug;
    $the_query = new WP_Query(array(
        'post_type' => 'annualreports_post',
        'posts_per_page' => -1,
        'tax_query' => array(
                        array(
                            'taxonomy' => 'annualreports_category',
                            'field'    => 'slug',
                            'terms'    => array( $catslug ),
                            'operator' => 'IN'
                        ),
                    ),
    ));                 
    while ( $the_query->have_posts() ) : 
    $the_query->the_post();
        echo '<h1>';
        the_title();
        echo '</h1>';
    endwhile; 
    echo '</div>';
} 
echo '</div>';
?>

jQuery

$(".investors-content .tab-pane").each(function(){
    $(this).hide();
    $('.investors-content .tab-pane:first-child()').show();
});

$('.nav-tabs li>span').on( "click", function(e) {
    e.preventDefault();
    var id = $(this).attr('data-href');
    $(".investors-content .tab-pane").each(function(){
        $(this).hide();
        if($(this).attr('id') == id) {
            $(this).show();
        }
    });
});

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.