I’m having a difficult time wrapping my head around an advanced loop in WordPress and am looking for some direction.
Here’s an image of what I’m trying to accomplish:
I’m using Bootstrap 3’s tab component to display my content. I’ve created a custom post type called recipes. Each recipe will generate a new tab which displays the title. When you click on the tab it will display the content for the recipe. These display in “tab groups” of three. After three posts another new “tab group” is created.
Here’s the code that I have so far:
<div class="container">
<h2>Our Recipes</h2>
<?php
$args = array(
'category_name' => 'dessert',
'orderby'=>'title','order'=>'ASC',
'post_type' => 'recipes'
);
$count = 0;
$loop = new get_posts($args);
$start =
while ( $loop->have_posts() ) : $loop->the_post();
if ($count % 3 == 0) {
echo '<div class="recipe-tabs">
<ul class="nav nav-tabs">';
}
echo '<li>
<a class="tab-link" href="#recipe-' . $post->ID . '" aria-controls="recipe-' . $post->ID . '" role="tab" data-toggle="tab" aria-expanded="true">'
. get_the_post_thumbnail() .
'</a>
</li>';
if ($count % 3 == 0) {
echo '</ul>
</div>';
}
// This needs to be loaded once
echo '<div class="tab-content"">';
// This data needs to be in a foreach loop
echo '<div role="tabpanel" class="tab-pane active" id="recipe-' . $post->ID . '">'
. get_the_content() .
'</div>';
// This needs to be loaded once
echo '</div>';
endwhile;
wp_reset_postdata();
?>
</div>I’m able to loop through the tabs and generate them. Where I’m struggling is in creating the (single) content area for each group, and then looping through the tab content.
Please let me know if I’ve left out anything that would be helpful. And as always, thank you for your help!
