Wordpress Loop - Style rows of posts differently

Question

Wordpress Loop - Style rows of posts differently

fshequin

2022年1月8日 11:27

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

Topic loop post-class Wordpress

Category Web

Dev · Accepted Answer · 2022年1月8日 11:27

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

kaiser · Accepted Answer · 2014年11月27日 17:10

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.

Rarst · Accepted Answer · 2012年9月28日 19:26

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;

Wordpress Loop - Style rows of posts differently

Increment

Decrement

About