You could probably use this ScriptyGoddess chunk:
http://www.scriptygoddess.com/archives/2002/05/27/alternating-comment-colors/
You’d have to edit it a little bit, but it seems pretty easy to do.
Another way to alternate between css classes for a div (or span, or whatever) is to, right after The Loop starts:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
add this:
<?php $post_class = ('red' == $post_class) ? 'blue' : 'red'; ?>
This would switch between the classes ‘.red’ and ‘.blue’ you declare in your style.css (just examples; name the classes whatever you want). The logic goes: Does $post_class equal “red”? If it does, change it to “blue”; if not, change it to “red”. After this line of code, add:
<div class="<?php echo $post_class; ?>">
Post-related tags and content would follow. Finally, make sure to close up the </div> at an appropriate place before The Loop completes.
Thread Starter
Angela
(@angela)
Brilliant!!! Thanks so much. It worked perfectly!! 🙂
just found this post, it works in my index.php,
tried it in my archive.php but no luck.
Anyway to have it work in the archives & catagories?
Thanks
Fess
Fess, if “it works” refers to the trick above, I can’t say why it doesn’t work for you for archive and category queries. A couple potential reasons why, though:
1. The stylesheet (or <head> style element) with your class declarations are, for some reason, not included on these pages.
2. The div (or whatever) element managing the alternating classes is not positioned properly within The Loop.
Without a good look at the source of your template(s) I can’t get more specific. You can always paste your template source to a site like:
http://wordpress.pastebin.ca
and reply back with the url to it. Then we can drop the guess work.
Kaf, what an excellent and useful way to switch styles! I’ve been wracking my brains for a logical way to achieve an “unbloggy” layout for a client and will put your suggestion to work right away.
Here’s how it looks so far:
http://tu.villagewerx.com/category/news/
Oops. Since you can’t see it in the HTML, I should note that the class switch as used here applies alternate left- and right-floating classes to posts appearing in the center column of this layout. (The most-recent full-width entry is pulled out of the loop and treated separately with a query-posts filter.)
Other pages in this site assign specific content by post-id to fixed layout elements. They’re static texts that should be immune to blog chronology, but “News” items, however, need to rotate through the three screen blocks as they age.
I’ve seen lots of people ask how to make the Loop do this sort of thing, but your answer in this thread is the clearest solution yet.
Kafkaesqui,
Here is the archive.php original:
http://wordpress.pastebin.ca/279430
As for the catagory, I have to research where that is..
Thank You
Fess
@fess
I don’t see anything in your template for doing what we’re talking about in this thread. I’ll assume you want to affect:
<div class="post">
If so, then change that portion of the template to:
<?php $post_class = ('red' == $post_class) ? 'blue' : 'red'; ?>
<div class="<?php echo $post_class; ?>">
Note that for your category template, WordPress uses archive.php when category.php does not exist for a theme. See the Template Hierarchy doc for more.
@bobsutton
Good to see you put this trick to use in the way you have. There’s certainly nothing tying it to just alternating background color or some such.
Kafkaesqui,
The code worked fine.
Thank you very much for your assistance in this matter.
Happy Holidays!
Fess
