Skip to content


Alternating Comment Classes

This idea expands on something originally done by MooKitty: Comment Backgrounds Hack. Kitty was directly inputting a background in wp-comments.php, but I realized that it made more sense to use an if/else statement and create two classes, comment-even and comment-odd, that could then be styled however the user wished. My end result is like so:

    35  <?php if ($comments) { ?>
    36  <ol id="commentlist">
    37  <?php $i=0; foreach ($comments as $comment) { ?>
    38       <li id="comment-<?php comment_ID() ?>" <?php if($i%2) {echo 'class="comment-even"';} else {echo 'class="comment-odd"';} $i++ ?>>
    39          <?php comment_text() ?>
    40          <p><cite><?php comment_type(); ?> <?php _e("by"); ?> <?php comment_author_l
ink() ?> &#8212; <?php comment_date() ?> @ <a href="#comment-<?php comment_ID() ?>"><?php c
omment_time() ?></a></cite> <?php edit_comment_link(__("Edit This"), ' |'); ?></p>
    41          </li>

Using i=0 as a starting point for the counter allows the logic of if / 2 to work as one expects; the first comment is <li id=”comment-blahdiblah” class=”comment-even”>, etc.

I personally would suggest this as a code change for 1.3+.

[Thanks to Carthik's WordLog for pointing me to MooKitty's hack in the first place.]

Popularity: 26% [?]

Posted in WordPress.


7 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

  1. graham says

    Isn’t there a mistake in the code on line 38? ?$gt;"

  2. Geof F. Morris says

    Yes, Graham, there is. I’ll fix it. One has to encode < and > to get them to work properly.

  3. Ian Eure says

    My JavaScript version of this only gives you one class – “alternate” is the default – but you can still style the other rows. If you use a selector to get at the parent of the area you want striped, you can set a default, then define the style for the alternate class.

  4. David House says

    Easier: change the foreach to read foreach ($comments as $num => $comment) then the second line in red to echo 'class="comment-' . ($num%2 ? 'odd' : 'even');

Continuing the Discussion

  1. wurch.log » Alternierende Kommentarzeilen linked to this post on 8/15/2004

    [...] 246;nnen. alternierender Hintergrund von MooKitty alternierender Hintergrund von GFMorris Thread-Darstellung von LaughingLizard 15. Au [...]

  2. The Indiana Jones School of Management linked to this post on 8/12/2004

    Improving WP Search Capabilities
    Carthik’s WordLog has a quite featureful entry today: Improving the Search Results Page. I will be implementing some or all of those suggestions in the near future. [When exactly? Your guess is at least as good as mine.]

    If you thought that I’d…

  3. Comments with alternating background colors in WordPress at Alex Jones linked to this post on 5/10/2007

    [...] with alternating background colors in WordPress Update: The URL is broken, but here is a page from about the same time that modifies the original hack. I have note tested this at [...]



Some HTML is OK

or, reply to this post via trackback.