1

Does somebody know ho to accomplish the following structure with a Wordpress loop, and repeat it for all my posts? Would be really helpful.

I tried to modify the code Joshua provided here: http://goo.gl/8TnZf0 to get this output but it's getting a bit of a brain-teaser for me.

-- loop --

    // 6 posts
    <div class="row">
     <ul class="large-block-grid-6 columns">
      <li>Post</li>
      <li>Post</li>
      <li>Post</li>
      <li>Post</li>
      <li>Post</li>
      <li>Post</li>
     </ul>
    </div>

    // next 2 posts in different row 
    <div class="row">
     <ul class="large-block-grid-2 columns">
      <li>Post</li>
      <li>Post</li>
     </ul>
    </div>

    // repeat this structure for all my posts so: 
    // 6 posts in a row 
    // 2 posts in a row
    // 6 posts in a row 
    // 2 posts in a row 
    // ... 
    // ...

-- end loop -- 

This is what I have now:

<?php 
$args = array ( 'post_type' => 'werk' );
query_posts( $args );
?>

<?php if (have_posts()) :
$count = 0; 
while (have_posts()) : the_post(); 
$count++; ?>

<?php if ($count  == 1) : ?> 

<section style="border: 1px solid black;">
  <ul class="large-block-grid-3 medium-block-grid-3 img-grid">

    <?php 
    $image = get_field('work_img');
    if( !empty($image) ): ?>

    <li>
      <div class="grid-img equalize"><img src="<?php echo $image['url']; ?>" alt=""></div>
      <small><?php the_title(); ?></small>
    </li>

    <?php endif; ?> 

<?php elseif ($count  > 1 && $count  < 7) : ?> 

    <?php 
    $image = get_field('work_img');
    if( !empty($image) ): ?>

    <li>
    <div class="grid-img equalize"><img src="<?php echo $image['url']; ?>" alt=""></div>
    <small><?php the_title(); ?></small>
    </li>

    <?php endif; ?> 

<?php elseif ($count == 7) : ?> 

  </ul>
</section>

<section style="border: 1px solid black;">
  <ul class="large-block-grid-2 medium-block-grid-3 img-grid">

    <?php 
    $image = get_field('work_img');
    if( !empty($image) ): ?>

    <li>
    <div class="grid-img equalize"><img src="<?php echo $image['url']; ?>" alt=""></div>
    <small><?php the_title(); ?></small>
    </li>

    <?php endif; ?> 

<?php elseif ($count  > 6 && $count  < 9) : ?> 

    <?php 
    $image = get_field('work_img');
    if( !empty($image) ): ?>

    <li>
    <div class="grid-img equalize"><img src="<?php echo $image['url']; ?>" alt=""></div>
    <small><?php the_title(); ?></small>
    </li>

    <?php endif; ?> 

<?php elseif ($count == 9) : ?> 

</ul>

</section>



<?php endif;  ?>
<?php endwhile; ?>
<?php endif; ?>
  • 1
    You have a total of 6+2+3 posts (11), you could declare a counter to know when you should open/close a new row. Then when it reaches 10 (if the counter starts at 0) you can set the counter @0 again. – Sladix Nov 17 '15 at 9:17
  • Thanks Antoine for your fast response, I've managed to put the first 6 posts and the 2 after in a different row. The only thing I need right now is to loop this layout thru all my posts and not just the first 8. – Mweterings Nov 17 '15 at 10:09
1

First of all you don't know if you have posts number dividable by 11 in your case, so what will happen if at the end of your loop you end up with let's say only 3 posts in your first section? Counter won't reach 7 so your markup will be corrupted because of unclosed tags.

EDIT:

According to update, code should looks like this. In fact it's just matter of changing numbers here, and there.

You could try this way:

<?php 
$count = 0; 
while ( have_posts() ) : the_post();
?>

<?php if( $count % 8 === 0 ) : ?>
<div class="row">
    <ul class="large-block-grid-6 columns">
<?php endif; ?>

<?php if( $count % 8 === 6 ) : ?>
<div class="row">
    <ul class="large-block-grid-2 columns">
<?php endif; ?>

        <li><?php the_title(); ?></li>

<?php if( $count % 8 === 5 || $count % 8 === 7 ) : ?>
    </ul>
</div>

<?php endif; ?>
<?php $count++; ?>
<?php endwhile; ?>

<?php 
    // we need to make sure that we close section
    // rewind counter one step
    $count--;

    // check if last counter value was the one when we close tags and if not, close it 
    if( $count % 8 ==! 5 && $count % 8 ==! 7 ) :
?>
    </ul>
</div>
<?php endif; ?>

I didn't run the code so I'm not guarantee that it works as it is, but i hope you get the point.

  • Hey Mateusz Marchel, Thanks for your reply It works like a charm! is there a way I can remove the large-block-grid-3 so it only shows 6 columns and 2 columns after that and start with 6 again instead of 9. – Mweterings Nov 17 '15 at 12:42
  • Please update your question with example of what you try to achieve, because I don't know if I understand you correctly. You want to remove large-block-grid-3 completely, or after displaying first 11 elements? – Mateusz Marchel Nov 17 '15 at 13:22
  • I wan't to remove it completely so you get a grid with 6 posts followed by 2 posts and 6 posts again and so on. – Mweterings Nov 17 '15 at 13:39
  • Please update your question, so i will update answer. – Mateusz Marchel Nov 17 '15 at 13:41
  • Please mark as resolved if that helps you. – Mateusz Marchel Nov 17 '15 at 14:02

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.