0

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?

1

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

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

  • 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 '14 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 '14 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 '14 at 23:04
  • Can you edit you question and post the html output? – deflime Jul 16 '14 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 '14 at 23:28
1

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>';
?>
  • Please add an explanation to your answer: why could that solve the problem? – fuxia Nov 9 '14 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 – Shwan Namiq Nov 9 '14 at 20:56
  • Please explain in your answer (not in a comment), what your code does and why it works. – fuxia Nov 9 '14 at 21:42

Your Answer

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

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