A lot of the themes that are developed tend to have plain jane comments. They follow fairly straightforward guidelines and many designers don’t stray from them, or customize them very little.

I had cause to customize some recently because I wanted the dates on the comments to look like the date on the post, which was customized. As you see from the image on the right, it’s very different from just plain text.

First you need to customize the comments themselves. A good guide can be found at Art Armstrong‘s blog. Once you have that installed in your functions.php file then you can alter it a bit.

In my case with the Onyx WordPress Theme, I added the date in like so:

function onyx_comment($comment, $args, $depth) {
 $GLOBALS['comment'] = $comment; ?>
 <li <?php comment_class(); ?> id=”li-comment-<?php comment_ID() ?>”>
  <div id=”comment-<?php comment_ID(); ?>”>
   <div class=”comment-author vcard”>
    <div class=”comment-date”>
     <p>
      <span class=”day”><?php comment_date(‘d’) ?></span>
      <span class=”month”><?php comment_date(‘M’) ?></span>
      <span class=”year”><?php comment_date(‘Y’) ?></span>
     </p>
    </div>
    <h4><?php printf(__(‘At %s, on this date, <cite class=”fn”>%s</cite> %s’), get_comment_time(), get_comment_author_link(), ‘<a href=”<?php echo htmlspecialchars(get_comment_link($comment->comment_ID)) ?>”>commented</a>’) ?><?php edit_comment_link(__(‘(Edit)’),’ ‘,”) ?>:</h4>
   </div>

   <?php if ($comment->comment_approved == ’0′) { ?>
    <em><?php _e(‘Your comment is awaiting moderation.’) ?></em>
    <br />
   <?php } ?>

   <div class=”comment-text”>
    <?php comment_text() ?>
   </div>

   <div class=”reply”>
    <?php comment_reply_link(array_merge($args, array(‘depth’ => $depth, ‘max_depth’ => $args['max_depth']))) ?>
   </div>
 </div>
 <?php
}

The .comment-author section is where I put everything, the .comment-date section is the part we’re interested in.

The css for it is here:

.comment-date p { padding:0 0 0 5px; }
 .comment-date p span { font-size:16px\9 !important; }
 .comment-date .month { text-transform:uppercase; font-size:18px; position:absolute; top:25px; top:13px\9; left:5px; left:16px\9; }
 .comment-date .day { font-size:24px; line-height:24px; position:absolute; left:10px; left:22px\9; top:0px; top:-4px\9; }
 .comment-date .year { display:block; position:absolute; right:-10px; right:0\9; left:13px\9; top:11px; top:28px\9; -webkit-transform:rotate(-90deg); -moz-transform: rotate(-90deg); font-size:20px; }
 *+html .comment-date .year, * html .comment-date .year { filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3); right:-15px; top:5px; }
 @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
  head~body .comment-date p { }
  head~body .comment-date p span { font-size:16px !important; }
  head~body .comment-date p .day { left:22px; top: -4px; }
  head~body .comment-date p .month { left:16px; top:13px; }
  head~body .comment-date p .year { left:13px; top:28px; }
 }

That also holds the bits and pieces of css for Opera, and IE8.

There are a few drawbacks. For example this does not work well with IE6. Opera does not display the date like the image above, but rather in three lines as Opera does not support rotation.

FireFox is the platform I design and program on, so I know it works well, as does Chrome. Safari (on Windows at least) works well also, but I have not tested this on Mac.

There are so many ways that you can customize dates, it’s all down to the power of WordPress and its vast amount of methods of customization. This is just one way.