Luca Biagini | Marketing, Adv, Communication & Webdesign

Customize Wordpress Comments
Published on March 16, 2008

«
»

That’s another article I’ve written for Gruppo Modulo after customizing the comments layout on their wordpress powered site. It’s a simple thing to do, but it still attracts enough visitors to gain a place on my personal blog.

Here’s how to have comments number displayed like comment background and to alternate the color of the comments background; it’s pretty simple and works on IE (6,7,8), Firefox (1.5,2,3), Safari (1,2,3), Opera (PC & Mac), and even in IE5 mac.

You have to change only 2 files, so backup them before you start. The file you need to edit are:

First open comments.php and remove the open “ol” tag:

<ol class="commentlist">

Obviously, we remove the close “ol” too.
Now we have to remove the open “li” tag in foreach loop:

<li class="<?php echo $oddcomment; ?>"
id="comment-<?php comment_ID() ?>">

And then remove the “/li” after:

<?php comment_text() ?>

This has been necessary because we must create new numbers for the background; the ones generated from the ol list won’t work for the background, so we removed them to avoid duplications. Now we create the big numbers; edit this line:

<?php foreach ( $comments as $comment ) ?>

to be like this:

<?php $bigNumber = 1; foreach ( $comments as $comment ) ?>

Now, we create the div with the bigNumber before the comment:

<div class="bigNumber"> <?php echo $bigNumber; $bigNumber++ ?></div>

Then we create a div to contain the rest of the comment (date, author, text, ecc.). We open it right after the new bigNumber div:

<div class="theComment">

And we close it where there was the /li, after:

<?php comment_text() ?>

Now we need to create the alternance of divs name, so that we can alternate the background color of the comments. We need to create a div that encloses both bigNumber and theComment. So after foreach we open this new div like this:

<div class="<?=$i%2?"pari":"dispari";$i++;?>">

Then we close this div right before endforeach, after the /div for theComment.
Now we just have to add few lines to our css as follows:

.dispari { background: #ccc; }
.pari { background: #999; }
.bigNumber {
          font-size: 6em;
          color: #fff;
          width: 450px;
          text-align: right;
          position: absolute;
          margin-top: 20px;
          z-index: 10;
}
.theComment { position: relative; z-index: 20; }

That’s all!

One Response to “Customize Wordpress Comments”

  1. 1 LambrosPower said at 4:05 pm on July 5th, 2008

    it would be great if you posted a screenshot or a previe to see how it looks like.

Leave a Reply