I am trying to adapt the Wordpress loop to style posts differently in rows that get infinitely smaller until all posts are displayed

The concept here is to display posts in rows

• first row 1 post
• second row 2 posts
• third row 3 posts
• fourth row 4 posts
• fifth row 5 posts
• sixth row 6 posts
• seventh row 7 posts

...and onward until all posts have been retrieved.

The below code is limited and does not do the above how would you adapt to make the below do the above?

The below code is functional and can be seen here.

<?php if (have_posts()) : ?>
<?php $count = 0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>
<?php if ($count == 1) : ?>
<div class="style-1"><?php the_content(); ?></div>
<?php elseif ($count == 2 || $count == 3) : ?>
<div class="style-2"><?php the_content(); ?></div>
<?php elseif ($count == 4 || $count == 5 || $count == 6) : ?>
<div class="style-3"><?php the_content(); ?></div>
<?php elseif ($count == 7 || $count == 8 || $count == 9 || $count == 10) : ?>
<div class="style-4"><?php the_content(); ?></div>
<?php elseif ($count == 11 || $count == 12 || $count == 13 || $count == 14 || $count == 15 ) : ?>
<div class="style-5"><?php the_content(); ?></div>
<?php elseif ($count >= 16 ) : ?>
<div class="style-6"><?php the_content(); ?></div>
<?php endif; ?>
<?php endwhile; ?>

Any help is much appreciated!

Kind Regards,

Fred Shequine

I am trying to adapt the Wordpress loop to style posts differently in rows that get infinitely smaller until all posts are displayed

The concept here is to display posts in rows

• first row 1 post
• second row 2 posts
• third row 3 posts
• fourth row 4 posts
• fifth row 5 posts
• sixth row 6 posts
• seventh row 7 posts

...and onward until all posts have been retrieved.

The below code is limited and does not do the above how would you adapt to make the below do the above?

The below code is functional and can be seen here.

<?php if (have_posts()) : ?>
<?php $count = 0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>
<?php if ($count == 1) : ?>
<div class="style-1"><?php the_content(); ?></div>
<?php elseif ($count == 2 || $count == 3) : ?>
<div class="style-2"><?php the_content(); ?></div>
<?php elseif ($count == 4 || $count == 5 || $count == 6) : ?>
<div class="style-3"><?php the_content(); ?></div>
<?php elseif ($count == 7 || $count == 8 || $count == 9 || $count == 10) : ?>
<div class="style-4"><?php the_content(); ?></div>
<?php elseif ($count == 11 || $count == 12 || $count == 13 || $count == 14 || $count == 15 ) : ?>
<div class="style-5"><?php the_content(); ?></div>
<?php elseif ($count >= 16 ) : ?>
<div class="style-6"><?php the_content(); ?></div>
<?php endif; ?>
<?php endwhile; ?>

Any help is much appreciated!

Kind Regards,

Fred Shequine

• loop
• post-class

• No close vote - perfectly WP territory. – kaiser Commented Sep 27, 2012 at 22:47
• Some notes: 1st, please get familiar with question styling using the WYSIWG-editor. 2nd, please - if you already posted this elsewhere - state this in your question. Thanks. – kaiser Commented Sep 27, 2012 at 23:05

3 Answers 3

It's basically only some math, but you can use $wp_query properties perfectly for that case:

Increment

global $wp_query;
if ( have_posts() )
{
    while ( have_posts() )
    {
        the_post();

        printf(
            '<div %s>%s</div>',
            get_post_class( "style-{$wp_query->current_post}" ),
            // OR:
            // get_post_class( "style-".++$wp_query->wpse66475_increment_posts )
        );
    }
} // endif;

So the 1^st time, your style-n would increment by one, before being attached to the <div>-class.

Decrement

… is basically the same, but the reverse way with the help of a custom property and our "Reading"-Settings:

global $wp_query;
$wp_query->wpse66475_decrement_styles = get_option( 'posts_per_page' );
if ( have_posts() )
{
    while ( have_posts() )
    {
        the_post();

        printf(
            '<div %s>%s</div>',
            get_post_class( "style-".$wp_query->wpse66475_decrement_styles-- )
        );
    }
} // endif;

// clean up:
unset( $wp_query->wpse66475_decrement_styles );

This time, we're decremented after we've looped through that post. Thanks to the option, this will perfectly align with our settings on paged posts (if we want that). We could also simply go and take $wp_query->found_posts.

This is more PHP than WP indeed. My take on loop would be something like this:

$level = 1;

while ( have_posts() ) : the_post();

    if ( ( $level - 1 ) <= $wp_query->current_post ) {
        echo "current level {$level}";
        $level *= 2;
    }

    the_title();

endwhile;

Something like this would work :

    global $wp_query;

    $post_counter = $wp_query->current_post;

    if ( 0 == $post_counter ) {
        $classes[] = 'style-1';
    }

    if ( $post_counter == 1 ) {
        $classes[] = 'style-2';

    return $classes;

}

You could try that with pre_get_posts or a new WP_Query