0

I try to achive this in wordpress based on my theme: fullpage.js demo

So I have a predefined markup for vertical sections (parents) and one for horizontal slides (children). Parents only contain posts if they have no children, if they have children, each post must be inside the child elements.

Here is the required markup:

<div id="fullpage">

    <section class="vertical-scrolling"  data-anchor="//post title here//"> 
      <div //we can have another div here if you like //>
        <article id="//post id here//">
         // Here comes the content of a vertical section//
        </article>
      </div>
    </section>
    <section class="vertical-scrolling"  data-anchor="//taxonomy term here//">
        <div class="horizontal-scrolling" data-anchor="//post title here//">
            <article id="//post id here//">
             // Here comes the post-content with the taxonomy term for the first slide //
            </article>
        </div>
        <div class="horizontal-scrolling" data-anchor="//post title here//">
            <article id="//post id here//">
             // Here comes the post-content with the taxonomy term for the second slide //
            </article>
        </div>
    </section>
</div>

Please help me to create a loop,

  • that outputs specified posts as vertical sections,
  • that outputs specified posts grouped for example by taxonomy term as horizontal slides
  • that meets the given markup requirements.
2
  • you will be more likely to get help if you show what you have tried.
    – Milo
    Feb 29, 2016 at 18:37
  • ok, I thought this could confuse people. Thank you for the reply.
    – matjaeck
    Feb 29, 2016 at 18:39

1 Answer 1

0

I was able to figure it out myself, here is the code:

    <div id="fullpage">

   <?php
//for each category, show 5 posts
$cat_args=array(
  'orderby' => 'name',
  'order' => 'desc'
   );
$categories=get_categories($cat_args);
  foreach($categories as $category) { 
    $args=array(
      'showposts' => 5,
      'category__in' => array($category->term_id),
    );
    $posts=get_posts($args);
      if ($posts) {
        echo '<section class="vertical-scrolling" data-anchor="' . $category->name.'">';
        foreach($posts as $post) {
          setup_postdata($post); ?>
          <div <?php if(has_term( 'slide', 'fp_type' )): ?>class="horizontal-scrolling"<?php endif;  ?>data-anchor="<?php the_title(); ?>">
          <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                 // Here comes the content //
                </article>
                </div>
          <?php
        } // endforeach;
        echo '</section>';
      } // endif;
    } // endforeach;
?>

    </div>

It seems to work quite fine.

@Michael´s answer helped me a lot

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.