I would use the build-in loop counter variable ‘current_post’ which starts with 0 for the first post in the loop;
example for a ‘default’ query:
<?php while( have_posts() ) : the_post();
if( $wp_query->current_post == 0 ) {
//output for 1st post//
} elseif( $wp_query->current_post == 1 ) {
//output for 2nd post//
} .......ETC....
example for custom query:
<?php $args = array( .whatever. );
$recent = new WP_Query( $args );
while( $recent->have_posts() ) : $recent->the_post();
if( $recent->current_post == 0 ) {
//output for 1st post//
} elseif( $recent->current_post == 1 ) {
//output for 2nd post//
} .......ETC....
http://codex.wordpress.org/Class_Reference/WP_Query
A solution maybe… Is use a simple counter in the PHP code and asign different classes using echoes in class and stuf,.. there are a lot of ways to do it…
But a pure CSS aproach is use the pseudoclass :nth-child
I do’nt know how toy main loop structure is, but usually is a wrapper div containing another div for every single post.Giving an output like this (or pretty similar)
<div class="wrap">
<div class="single_post_div">
Here goes your post content 1
</div>
<div class="single_post_div">
Here goes your post content 2
</div>
<div class="single_post_div">
Here goes your post content 3
</div>
<div class="single_post_div">
Here goes your post content 4
</div>
<div class="single_post_div">
Here goes your post content 5
</div>
<div class="single_post_div">
Here goes your post content 6
</div>
<div class="single_post_div">
Here goes your post content 7
</div>
</div>
As you see all post hace the same class, no need a single class for everyone or single id (you don’t want select bi ID, you want select by position in loop) there is when you could use :nth-child pseudoclass
.wrap .single_post_div { width:100%; padding:20px 0; }
.wrap .single_post_div:nth-child(1) { background:#9FC; }
.wrap .single_post_div:nth-child(2) { background:#69F; }
.wrap .single_post_div:nth-child(3),
.wrap .single_post_div:nth-child(4) { background:#999; }
.wrap .single_post_div:nth-child(5),
.wrap .single_post_div:nth-child(6),
.wrap .single_post_div:nth-child(7) { background:#aa0; }
This will apply style to the (x) child from parent div (.wrap in the example)
You can see it working in a lil jsfiddle i did.
I like this solution cause yo don’t need mess on PHP or querys…
I hope it be usefull toy you 🙂
Thats what I ended up doing, a css approach. Only problem is it seems like handing off something like that to the next developer whoever handles the site might be confused by it all.
use comments… a lot of comments xDDD
