title: Loop through categories and create tab for each Wordpress and Bootstrap 3
body: <p>I'm trying to create a page that holds all categories of my custom post type as tabs, with a tab content.</p>
  
  <p>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.</p>
  
  <p>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".</p>
  
  <p>My code so far:</p>
  
  <pre><code> &lt;?php
     echo '&lt;ul class="nav nav-tabs" role="tablist"&gt;';
  
  $args = array(
  'hide_empty'=&gt; 1,
  'orderby' =&gt; 'name',
  'order' =&gt; 'ASC'
   );
  
  $categories = get_categories($args);
  
   foreach($categories as $category) { 
  
  echo '&lt;li&gt;&lt;a href="#' . $category-&gt;name.'" role="tab" data-toggle="tab"&gt;' .      
  $category-&gt;name.'&lt;/a&gt;&lt;/li&gt;';
  $cat_name = $category-&gt;name;
  
  } 
  echo '&lt;/ul&gt;';
  echo '&lt;div class="tab-content"&gt;';
    foreach($categories as $category) { 
      echo '&lt;div class="tab-pane" id="' . $category-&gt;name.'"&gt;';
  
  
      ?&gt;
  
  &lt;?php 
  
   $the_query = new WP_Query(array(
    'post_type' =&gt; 'acme_product',
    'posts_per_page' =&gt; 100,
    'category_name' =&gt; $cat_name
      )); 
   while ( $the_query-&gt;have_posts() ) : 
   $the_query-&gt;the_post();
   ?&gt;
  
          &lt;h1&gt;&lt;?php the_title(); ?&gt;&lt;/h1&gt;
  
                 &lt;?php 
  endwhile; 
  
   ?&gt;   
  
  
    &lt;?php } 
  echo '&lt;/div&gt;';
   ?&gt;
  </code></pre>
  
  <p>The problems is that each content area displays all post of every category.</p>
  
  <p>What i want to achieve: <a href="http://dtm-auto.ch/fahrzeuge/" rel="nofollow">Link</a></p>
  
  <p>Any suggestions?</p>