I'm trying to reproduce a bootstrap navigation component inside a page that display sub category and associated posts to those sub-categories like this:
- Taxonomy term 1
- taxonomy sub-term 1
- Post 1
- Post 2
- etc...
- taxonomy sub-term 2
- Post 3
- etc...
- taxonomy sub-term 1
and visually I'm trying to reproduce this component (bootstrap 4 vertical nav pills):
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
</div>
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
</div>
In my Wordpress template, I wrote something like this to get each subcategory and looping them:
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<?php
//loop to display child terms
// Get children of current parent term
$childrens = get_term_children($businessLine->term_id, $businessLine->taxonomy);
$count = 0;
foreach ($childrens as $child):
$count ++;
echo $count;
$term = get_term_by( "id", $child, $businessLine->taxonomy );
//prepare query to get posts in sub taxonomy
$args = array(
"post_type" => "offer",
"tax_query" => array(
array(
'taxonomy' => $businessLine->taxonomy,
'field' => 'slug',
'terms' => $term->slug
)
)
);
$query = new WP_Query($args);
?>
<a class="nav-link active" id="v-pills-<?php echo $term->term_id ?>-tab" data-toggle="pill" href="#v-pills-<?php echo $term->term_id; ?>" role="tab" aria-controls="v-pills-<?php echo $term->term_id; ?>" aria-selected="true"><?php echo $term->name; ?><sup><span class="badge badge-primary badge-pill"><?php echo $term->count ?> offers</span></sup></a>
</div>
<div class="tab-content" id="v-pills-tabContent">
<?php if( $query->have_posts() ) : ?>
<?php while( $query->have_posts()) : $query->the_post(); ?>
<?php echo $count; ?>
<div class="tab-pane fade show active" id="v-pills-<?php echo $term->term_id; ?>" role="tabpanel" aria-labelledby="v-pills-<?php echo $term->term_id; ?>-tab">
<?php the_title(); ?>
</div>
<?php endwhile; endif; wp_reset_postdata(); ?>
</div>
<?php endforeach; ?>
$count variable was made to check how it loops
$businessLine variable is the current queried object (I'm in taxonomy-{name}.php template)
On the output, my DOM produce this behavior (sorry I'm obligated to mask out the output but <a class="nav-link">
display the sub taxonomy term correctly and same for <div class="tab-pane">
)
What I don't understand is why my <a class="nav-link">
sub-taxonomy link is outside the first component <div class="nav flex-column nav-pills">
after the first iteration of the foreach loop and why I have multiple <div class="tab-content">
created
Is there a way to display information side by side in this unique loop and achieving this bootstrap component or should I see in an another direction?
Thanks