I have created small widget on my home page which is using JQuery tabs plugin. So tabs nav is made of custom taxonomy titles and content below should be relevant to those tabs. So in other words every time user will click on tab I would like to display posts only relevant to that taxonomy.

Here is my code so far:

//This part of my code creates tabs navigation

<ul id="tab-menu" class="menu_tabify">
$terms = get_terms('post_category');
foreach ($terms as $term) {
    $wpq = array ('taxonomy'=>'post_category','term'=>$term->slug, 'posts_per_page' => -1);
    $myquery = new WP_Query ($wpq);
    $article_count = $myquery->post_count;
    echo "<li class=\"term-heading\">";
        echo "<a class=\"term-heading\" href=#".$term->slug.">";
            echo $term->name;
        echo "</a>";
    echo "</li>";
echo "</ul>";

// This part of my code creates tabs content where I would like to also include my loop
// which will display relevant posts depending on taxonomy
foreach ($terms as $term) {
    echo "<div class=\"tab-content\"  id=\"".$term->slug."\">";
        //loop to go here
    echo "</div>";


Can anyone help me with creating that loop?


This should work, but it's not tested

<div id="tabs">   

<ul id="tab-menu"> 
$terms = get_terms('category');
global $wpdb;
$posts = array();
if ( is_array($terms) && ! empty($terms) ) {
$active = null;
foreach ( $terms as $i => $term ) {
  $ids = $wpdb->get_col( $wpdb->prepare("SELECT object_id FROM $wpdb->term_relationships
  WHERE term_taxonomy_id = %d",
  $articles_count = count($ids);
  if ( $articles_count > 0 ) { 
    if ( is_null($active) ) $active = $i;
    $posts[$term->term_id] = get_posts( array('post__in' => $ids, 'posts_per_page' => 5, 'orderby' => 'post_date', 'order' => 'DESC') );
  $class = ($active == $i) ? 'term-heading active' : 'term-heading';
  <li class="<?php echo $class; ?>">
    <a class="term-heading" href="#<?php echo $term->slug; ?>"><?php echo $term->name; ?></a>
  echo '</ul>  <!-- end #tab-menu -->' . PHP_EOL;

//This part of code creates tabs content
if ( is_null($active) ) $active = 0;
foreach ( $terms as $i => $term ) {
  $class = ($active == $i) ? 'tab-content active' : 'tab-content';
  <div class="<?php echo $class; ?>"  id="<?php echo $term->slug; ?>">
  if ( ! empty($posts[$term->term_id]) ) {
    echo '<ul>' . PHP_EOL;
    global $post;

    foreach ($posts[$term->term_id] as $post) {
    <li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
    echo '</ul>' . PHP_EOL;
  } else {
    printf('<p>%s</p>', __('No posts in this category.'));
<?php } ?>

</div> <!-- end #tabs -->
  • G.M. that's nearly perfect one small thing, when I load page tab content is empty and only when I click on nav its loading content I think its due to foreach loop been executed only when I click on first tab, is there any way I could load content of the first tab by default? Thank again for your help so far – jmysona Jul 29 '13 at 10:58
  • Well, php is runned by server, js by browser. When the page load, everything is just there because server already echoed the html before sending to the browser. So there is no way foreach loop run after a click anywhere. Want a confirm? When page load, and you said tab content is blank, see at the html code of page (in Windows CTRL+u on firefox or chrome) and you should see everything, also the tab content. If so, and I think is so, you have a javascript or css problem. Maybe you have to set a tab as 'active' or something like that? – gmazzap Jul 29 '13 at 11:08
  • you are right I need to set active class to first li item, thank you very much again for your help it work like a charm – jmysona Jul 29 '13 at 11:21
  • You are welcome. I've edited the code to set a class 'active' in the first not empty tab. The class is putted in the first non empty li.term-heading and in the related div.tab-content. So, instead to have always first tab marked as active, if first tab have no post the first tab that contain posts is marked as active. If no category terms have at least a post no li.term-heading will have 'active' class, but first div.tab-content will have. – gmazzap Jul 29 '13 at 11:48
  • A note. The code works in a way you may not expect for parent/children categories. Assuming you have a parent category called e.g. 'Color' and this one has two children terms, e.g. 'Red' and 'Green'. If no post is assigned directly to 'Color', but you have some posts in 'Red' and some in 'Green' you will have 3 tabs: 'Color', 'Red' and 'Green' where 'Color' tab is empty. If you don't like this behavior the code need some changes. – gmazzap Jul 29 '13 at 12:00

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.