WordPress Loop – Style rows of posts differently

by

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

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 1st 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.

Leave a Comment