0

Ok I broke my post down into different style settings. Like shown below. The first post is a large block. the next four post are small and aligned next to the larger post.

enter image description here

I used the loop below to achieve this affect.

<?php if (have_posts()) : ?>
<?php $count = 0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>
<!--First Post -->
<?php elseif ($count <= 1) : ?>
<div class="style-1"><?php the_content(); ?></div>

<!--Next Four Boxes -->
<?php elseif ($count <= 5) : ?>
<div class="style-2"><?php the_content(); ?></div>

<!--Next Six Boxes -->
<?php elseif ($count <= 10) : ?>
<div class="style-3"><?php the_content(); ?></div>

<?php endif; ?>
<?php endwhile; ?>
<php else : ?>
<?php endif; ?>

Now, my question is. How do I break the loop to add a special div after the first five post and continue the loop after the special div? Like photo'd below. The gray area. I'm also going to want to add another special div after the next six post, each special div will have different content.

enter image description here

2

use % to set the template(style) or you can use :nth-child(16n+1) ...

<?php if (have_posts()) : ?>
<?php $count = 0; ?>
<?php $st = 16; //after how many blocks you want to repeat the pattern 
<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>
<?php if ($count%$st == 1) : ?>
<div class="style-1"><?php the_content(); ?></div>
<?php elseif ($count%$st == 2 || $count%$st == 3) : ?>
<div class="style-2"><?php the_content(); ?></div>
<?php elseif ($count%$st == 4 || $count%$st == 5 || $count%$st == 6) : ?>
<div class="style-3"><?php the_content(); ?></div>
<?php elseif ($count%$st == 7 || $count%$st == 8 || $count%$st == 9 || $count%$st == 10) : ?>
<div class="style-4"><?php the_content(); ?></div>
<?php elseif ($count%$st == 11 || $count%$st == 12 || $count%$st == 13 || $count%$st == 14 || $count%$st == 15 ) : ?>
<div class="style-5"><?php the_content(); ?></div>
<?php elseif ($count%$st == 0 ) : ?>
<div class="style-6"><?php the_content(); ?></div>
<?php endif; ?>
<?php endwhile; ?>

or (I'm not sure if I understand what you need)

<?php if($count % $st == 0){?>
// do your code
<?php }?> 
//continue with your loop code

Try this code

    <?php if (have_posts()) :
    $count = 0;
    while (have_posts()) : the_post();
        $count++;
        if ($count  == 1) : ?> <!--first box -->
            <div class="style-1"><?php the_content(); ?>
        <?php elseif ($count  > 1 && $count  <5) : ?></div> <!--next three boxes -->
            <div class="style-2"><?php the_content(); ?></div>
        <?php elseif ($count  == 5) : ?> <!-- box five and break div -->
            <div class="style-2"><?php the_content(); ?></div>
            <div class="first-break-div"><?php /* the content from first break div */ ?></div>
        <?php elseif ($count >5 && $count < 11) : ?> <!--next five boxes -->
            <div class="style-3"><?php the_content(); ?></div>
        <?php elseif ($count == 12) : ?> <!--last box and last break div -->
            <div class="style-3"><?php the_content(); ?></div>
            <div class="last-break-div"><?php /* the content from last break div */ ?></div>
        <?php endif;
    endwhile;
endif; ?>

This was my output

<div class="style-1"></div>
<div class="style-2"></div>
<div class="style-2"></div>
<div class="style-2"></div>
<div class="style-2"></div>
<div class="first-break-div"></div>
<div class="style-3"></div>
<div class="style-3"></div>
<div class="style-3"></div>
<div class="style-3"></div>
<div class="style-3"></div>
<div class="style-3"></div>
<div class="last-break-div"></div>
| improve this answer | |
  • let say you want after 6 posts to add a new <div>, you will use if($count % 6 == 0){ /*add my div*/ } – Alex Andrieș Jul 30 '15 at 16:32
  • something like this <?php // I want a new div after 6 post $st = 6; $count = 0; while (have_posts()) : the_post(); $count++; //do the loop if($count%6==0){ ?> <div class="break-div"></div> <?php } endwhile; ?> – Alex Andrieș Jul 30 '15 at 16:35
  • I'm not following what is this line that was added <?php $st = 16; //after how many blocks you want to repeat the pattern – user32447 Jul 30 '15 at 16:40
  • after 16 posts, the style will repeat, if you have like 30 posts, won't check for 30 posts to see what style you'll use – Alex Andrieș Jul 30 '15 at 16:44
  • Is the the the simplest way. You gave me many options and now i'm confused. Each break div will have different content. – user32447 Jul 30 '15 at 16:47

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.