Alternating Comment Styles

Following on from last weeks post on highlighting your comments, I figured another useful post would be about setting up your comments to have alternating styles. We do this by adding an additional CSS class to every other comment, then you can style this class in your stylesheet with, perhaps, a different background colour, a border, or even put the user’s gravatar on the opposite side of the comment to normal.

To work out which comments to alternate we use a basic PHP “if statement” to determine which comment is being displayed in the comment loop. To do this use a boolean (TRUE/FALSE) variable in the loop i.e.

if ($altcom) : $altcom = FALSE; else : $altcom = TRUE; endif;

This code checks if the boolean variable $altcom is TRUE. If it is then it sets the value to FALSE, if it’s FALSE it sets the value to TRUE. This gives us the alternating variable, which we can then use to control the output of a CSS class to every other comment in the loop.

Using the Classic theme’s comment.php file as an example, to add the above code in we change the following lines:

<?php foreach ($comments as $comment) : ?>
<li id="comment-<?php comment_ID() ?>">

to

<?php $altcom = TRUE;
foreach ($comments as $comment) :
if ($altcom) : $altcom = FALSE; else : $altcom = TRUE; endif;
?>
<li id="comment-<?php comment_ID() ?>"<?php if ($altcom) echo ' class="altcomment"'; ?>>

The first line declares our boolean variable as TRUE. This will just avoid any PHP warnings/errors. The foreach line is the start of the comment loop, then the if statement goes in to give us the alternating variable. As you can then see we’ve used this variable then to control whether our class is output or not on the last line.

Then you just need to add a new class to your stylesheet to style the alternative comment differently. Put this after your comment styling is declared so that the alternative comment style overrides the default one.

If you already have a class in your comment wrap (this could be a list item, a div or something else) then alter the last line of the above code to just echo out the second class name ie.

<?php if ($altcom) echo ' altcomment'; ?>

If you implemented the author highlight code from last week then you may want to merge these two pieces of code. If so then add a class to your comment wrap if one doesn’t already exist and then run the two if statements, one after the other ie.

<li id="comment-<?php comment_ID() ?>" class="<?php if ($altcom) echo 'altcomment '; if ($comment->user_id == get_the_author_ID()) echo 'mycomment'; ?>">

This will then output either or both classes when relevant.

Don’t forget, the list item code above is just an example from the Classic theme. Your comments.php file may be different and use a div or other element, covering all possibilities would take me a while, so if you’re not sure then leave a comment with the code you think is relevant and I’ll let you know where to add this code.