0
<?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>
0

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();

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.