How to alternate color for every other post?

  • I’ve searched the forums and Google but only came up with partial threads that were almost a year old.

    Can anyone give me a clue how to implement alternate colors for the posts? I have it set up for the comments section but for the life of me can not figure out how to get the posts to alternate.

    Thanks in advance.

Viewing 12 replies - 1 through 12 (of 12 total)

  • You could probably use this ScriptyGoddess chunk:
    https://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.

    neat.

    Neat trick. ??

    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:

    https://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:

    https://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:
    https://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

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘How to alternate color for every other post?’ is closed to new replies.