How to change post count in wordpress loop?

Question

Hey I am attempting to customize my WordPress post loop to create different post styles for a certain set of posts.

For example the first three posts would be styled in it’s own way, the next four posts will be styled in it’s own way and etc.

In addition, I want to add a break after a certain amount of posts. See image below for what I am trying to accomplish.

http://cdn.ratedrnb.com/2016/04/photo.png

Now this code below is what I use to style the posts differently.

<?php if (have_posts()) :
$count = 0;

// What page are we on?
$paged = ( get_query_var('paged') > 1 ) ? get_query_var('paged') : 1;
// How many pages of posts do we have to display?
//$max = $wp_query->max_num_pages;

while (have_posts()) : the_post();      

$count++;

if ($count  == 1 && $paged == 1) : ?> 

 <!--first post -->

 **html/style of the first post**

 <!--next four post -->

 <?php elseif ($count  > 1 && $count  <5 && $paged == 1) : ?>

 **html/style of next four post**

 <!-- 4th post and break div -->

<?php elseif ($count  == 5 && $paged == 1) : ?> 

**html/style of fourth post**

<div>This is the div break</div>

<!--next five post -->

 <?php elseif ($count >5 && $count < 11 && $paged == 1) : ?> 

**html/style of next six post**

<!--sixth post and div break-->

 <?php elseif ($count == 11 && $paged == 1) : ?>

**html/style of 6th post**

 <div>This is the div break</div>

 <!--last eight post-->

<?php elseif ($count  > 12 && $count  < 21 && || $paged == 1) : ?>

**html/style of last eight post**

  <?php endif;
endwhile;
endif; ?>

Now this code is also designed so that when I go to the next page the rest of the pages takes the style of the last eight post.

Can anyone explain to me how to change these lines below to show the first 3 posts instead of just one.

<?php if (have_posts()) :
$count = 0;

// What page are we on?
$paged = ( get_query_var('paged') > 1 ) ? get_query_var('paged') : 1;
// How many pages of posts do we have to display?
//$max = $wp_query->max_num_pages;

while (have_posts()) : the_post();      

$count++;

if ($count  == 1 && $paged == 1) : ?> 

Also can anyone explain to me why the person I hired to do this had to separate the loop like below.

 <!--next four post -->

 <?php elseif ($count  > 1 && $count  <5 && $paged == 1) : ?>

 **html/style of next four post**

 <!-- 4th post and break div -->

<?php elseif ($count  == 5 && $paged == 1) : ?> 

**html/style of fourth post**

<div>This is the div break</div>

I am trying to get more understanding about PHP coding.

Answer 1

First, go to Settings->Reading->Blog pages show at most->25. Or change the posts_per_page in main query to 25.

Then, try this code in your template:

if (have_posts()) :
    $count = 0; $paged = ( get_query_var('paged') > 1 ) ? get_query_var('paged') : 1;
    while (have_posts()) : the_post();
        $count++;
        if ($count <= 3 && $paged === 1) :
            if ($count === 1) echo '<div class="break"><h2>Break div | first 3 posts</h2></div>'; ?>
            <div class="first-three">
                <?php the_title() ?>
            </div>
        <?php elseif (3 < $count && $count <= 7 && $paged === 1) :
            if ($count === 4) echo '<div class="break"><h2>Break div | next 4 posts</h2></div>'; ?>
            <div class="next-four">
                <?php the_title() ?>
            </div>
        <?php elseif (7 < $count && $count <= 13 && $paged === 1) :
            if ($count === 8) echo '<div class="break"><h2>Break div | next 6 posts</h2></div>'; ?>
            <div class="next-six">
                <?php the_title() ?>
            </div>
        <?php elseif (13 < $count && $count <= 20 && $paged === 1) :
            if ($count === 14) echo '<div class="break"><h2>Break div | next other 6 posts</h2></div>'; ?>
            <div class="next-other-six">
                <?php the_title() ?>
            </div>
        <?php else :
            if ($count === 21) echo '<div class="break"><h2>Break div | last 6 posts</h2></div>'; ?>
            <div class="last-six">
                <?php the_title() ?>
            </div>
        <?php endif;
    endwhile; ?>
    <div class="nav-previous alignleft"><?php next_posts_link('Older posts'); ?></div>
    <div class="nav-next alignright"><?php previous_posts_link('Newer posts'); ?></div><?php
endif;

Now, you should understand how to do it. Make sure you have at least 25 posts to display and be aware of sticky_post.