Retrieve posts inside foundation tabs and tab-content split by 3 per row

Question

<?php
/*
Template Name: Page information
*/
get_header(); ?>

<div class="row">

  <div class="main-wrap" role="main">

    <?php do_action( 'foundationpress_before_content' ); ?>

    <div class="row">
      <div class="column"><a class="back-to-shop-link" href="/shop" title="Terug naar de shop">< Terug</a> </div>
    </div>

    <header class="featured-hero" role="banner">
      <figure>
        <img src="<?php echo the_post_thumbnail_url('full'); ?>" alt="<?php echo the_title(); ?>">
      </figure>
    </header>

    <div class="info-tabs">

      <?php
        $i = 0;
        $break_after = 3;
        $counter = 0;
        $args = array(
          'post_type' => 'information',
          //'posts_per_page' => 6,
          //'orderby' => 'date',
        );
        $tabs = new WP_Query( $args );
      ?>

      <?php // tabs for tabs ?>

      <?php if ( $tabs->have_posts() ) {
        while ( $tabs->have_posts() ) : $tabs->the_post();
        if ($counter % $break_after == 0) {
            echo '<ul class="tabs ' . $i++ . '">';
        } ?>

        <li class="tabs-title small-6 large-4">
          <a href="#<?php echo $i; ?>"><?php the_title(); ?></a>
        </li>

        <?php 
          if ($counter % $break_after == ($break_after-1)) {
              echo '</ul>';
          }
          ++$counter;
        endwhile;
      } else {
          echo __( 'No products found' );
      }
      wp_reset_postdata();
      ?>
    </div>

    <?php do_action( 'foundationpress_after_content' ); ?>

  </div>

</div>

<?php get_footer();

I'm using foundation-tabs in combination with a while-statement to get 3 posts (tabs) per row. Which I got working. Each row has a set of 3 tabs.

What I can't figure out is how to get a loop inside one row where each row has to contain the post excerpt inside a container <div class="tabs-content"></div>.

So after each <ul class="tabs">3 tabs</ul> I want to have A tabs-content container with 3 tab-panels inside.

So how should I approach this?

The final result should look like this:

<div class="info-tabs">

  <!-- first set of tabs and tabs-content -->

  <ul class="tabs 0">
    <li class="tabs-title small-6 large-4">
      <a href="#1">test</a>
    </li>
    <li class="tabs-title small-6 large-4">
      <a href="#1">test</a>
    </li>
    <li class="tabs-title small-6 large-4">
      <a href="#1">test</a>
    </li>
  </ul>
  <div class="tabs-content" data-tabs-content>
    <div class="tabs-panel" id="*">
    [...]
    </div>
    <div class="tabs-panel" id="*">
    [...]
    </div>
    <div class="tabs-panel" id="*">
    [...]
    </div>
  </div>

  <!-- second set of tabs and tabs-content -->

  <ul class="tabs 0">
    <li class="tabs-title small-6 large-4">
      <a href="#1">test</a>
    </li>
    <li class="tabs-title small-6 large-4">
      <a href="#1">test</a>
    </li>
    <li class="tabs-title small-6 large-4">
      <a href="#1">test</a>
    </li>
  </ul>
  <div class="tabs-content" data-tabs-content>
    <div class="tabs-panel" id="*">
    [...]
    </div>
    <div class="tabs-panel" id="*">
    [...]
    </div>
    <div class="tabs-panel" id="*">
    [...]
    </div>
  </div>
</div>

Answer 1

I managed to 'solve' the problem with the code below. It's not a pretty solution but it does the job. Any adjustments to the code to make it more pretty are welcome.

<?php
/*
Template Name: Page information
*/
get_header(); ?>

<div class="row">

  <div class="main-wrap" role="main">

    <?php do_action( 'foundationpress_before_content' ); ?>

    <div class="row">
      <div class="column"><a class="back-to-shop-link" href="/shop" title="Terug naar de shop">< Terug</a> </div>
    </div>

    <header class="featured-hero" role="banner">
      <figure>
        <img src="<?php echo the_post_thumbnail_url('full'); ?>" alt="<?php echo the_title(); ?>">
      </figure>
    </header>

<div class="info-tabs">

    <?php
      $tabsnr = 1;
      $linknr = 1;
      $panelnr = 1;
      $tabscontentnr = 1;
      $break_after = 3;
      $counter = 1;
      $args = array(
        'post_type' => 'information',
        'posts_per_page' => 9,
        //'orderby' => 'date',
      );
      $argsContent = array(
        'post_type' => 'information',
        //'posts_per_page' => 3,
        //'orderby' => 'date',
      );
      $tabs = new WP_Query( $args );
      $tabsContent = new WP_Query( $argsContent );
    ?>

    <?php // tabs for tabs ?>

    <?php if ( $tabs->have_posts() ) {

      while ( $tabs->have_posts() ) : $tabs->the_post();
      if ($counter % $break_after == 1) {
          echo '<ul class="tabs" data-tabs id="tabs-' . $tabsnr++ . '">';
         $items = array();
      }?>

      <?php
      $item = array();
      ob_start();
      the_title();
      $item[] = ob_get_contents();
      ob_end_clean();

      ob_start();
      echo get_the_post_thumbnail_url();
      $item[] = ob_get_contents();
      ob_end_clean();
      ob_start();
      the_excerpt();
      $item[] = ob_get_contents();
      ob_end_clean();

      ob_start();
      the_permalink();
      $item[] = ob_get_contents();
      ob_end_clean();
      $items[] = $item;
      ?>

      <li class="tabs-title small-6 large-4">
        <a class="tabs-link" href="#panel-<?php echo $linknr++; ?>"><?php the_title(); ?></a>
      </li>

      <?php
      if ($counter % $break_after == 0) {
      echo '</ul>';
      echo '<div class="tabs-content" data-tabs-content="tabs-'. $tabscontentnr++ .'">';

        foreach($items as $item) {
          echo '<div class="tabs-panel" id="panel-'. $panelnr++ .'">';

          echo '</div>';           
        }

      echo '</div>';
                wp_reset_postdata();

    }

      $counter++;

      endwhile;

    } else {
        echo __( 'No products found' );
    }
    wp_reset_postdata();
    ?>


    </div>

    <?php do_action( 'foundationpress_after_content' ); ?>

  </div>

</div>
<?php get_footer();