WordPress Loop – Style rows of posts differently

4 Views

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

Read More
  • 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

Post Views: 4

Related posts

Leave a Reply

3 comments

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

  2. 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;

  3. 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