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

?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

Topic split tabs loop count posts Wordpress

Category Web

1
answered at

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

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.