CODEWITHSUNDEEP
phpwordpress
Jim
Jim

Reputation: 227

Make a wordpress post loop add a dynamic custom style class based on order

I have a need to include an extra style on my post loop so i end up with extra styling options, like this:

<article class="first-column format-standard hentry category-uncategorized">
<article class="second-column format-standard hentry category-uncategorized">
<article class="third-column format-standard hentry category-uncategorized">
<article class="first-column format-standard hentry category-uncategorized">
<article class="second-column format-standard hentry category-uncategorized">
<article class="third-column format-standard hentry category-uncategorized">

And then it repeats this order. It's so i can have my posts three wide and style them nicely.

The key one i wish to add is first-column, second column, and so on.

Any help on what to add in wordpress for this?

This is what currently creates this loop:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

Upvotes: 0

Views: 2108

Answers (2)

webnuts.io
webnuts.io

Reputation: 73

Thanks worked for me very well...

I used it on a bootstrap theme i develop currently and i wanted two backgrounds colors. One lighter and one darker for each post. So it is easier to identify each new post. Worked fine I just used 

$classes = array(
    0=>'light-bg',
    1=>'darl-bg'
);
$i = 0;
<div id="post-<?php the_ID(); ?>" <?php post_class($classes[$i++%2]); ?>>
// The rest of your post html goes here
</div>

Upvotes: 0

Philippe Boissonneault
Philippe Boissonneault

Reputation: 3949

Outside your loop : 

$classes = array(
    0=>'first-column',
    1=>'second-column',
    2=>'third-column'
);
$i = 0;

In your loop : 

<article id="post-<?php the_ID(); ?>" <?php post_class($classes[$i++%3]); ?>>

Upvotes: 1

Related Questions