In this second part of the how to style your comments series I will show you how to separate or remove track-backs and pings from the comments. there are many tutorials out there on this subject, but many of them can be confusing to the non programmer as they say find this line and add this after or before it. In fact, I did that in the Create A Wordpress Theme series. This tutorial is different, it shows you all the needed code in comments.php so that you can see exactly where the additional code goes and I think this version is a little cleaner and easier to understand.

Removing The Trackbacks And Pings

The first step is to show only the comments, this is done by adding the code that is in red. If you want to you can stop there if you do not want to show the trackbacks and pings. All the code is doing is testing if the input is a comment, if it is then it goes on to display the comment otherwise it’s a track-back or ping and is ignored.

Showing The Trackbacks And Pings

If you do want to show the track-backs and pings then add the code that is in blue. This will print a header that shows how many track-backs there are followed by a list of them. I’ve added an optional bit of code in purple, you add this only if you want to show that you have no track-backs or pings yet.

Other Fixes

You might have noticed that the default theme uses the h3 tag as a title to different parts of the comment section. To me this is a no-no, the h tag is used to bring the Search Engines attention to the included text. This is fine if you want to try ranking for the phrase ‘No responses’, but it’s not exactly useful hey?

The h tags should only be used within the actual posts, outside of a post you can use the p tag and style it. So in this case we have three h3 tags, you can replace them with the following:

<p class="comhdr">

Don’t forget to change the </h3>’s to </p>. Note that there are other h tags in comment.php, you should really change them all. A little of topic but similar, virtual every theme I have seen uses h2, h3 or h4 tags for the plugin or widget headers - why? I don’t know! These too should be changed as I discussed in the How To Create A Wordpress Theme series.

All that’s left is to style these header tags something like this:

.comhdr {
  font-size: 1.6em;
  margin: 0px;
  color: #000;
}

You will probably have to play around with the font-size and color so that they match your theme.

Here is the section of comment.php that needs to be modified:

<!-- You can start editing here. -->

<?php if ($comments) : ?>
  <h3 id="comments"><?php comments_number('No Responses',
  'One Response', '% Responses' );?> to “<?php the_title(); ?>”</h3>
  <?php $ck_trkcnt = 0; ?>

  <ol class="commentlist">
  <?php foreach ($comments as $comment) : ?>
    <?php $comment_type = get_comment_type(); ?>
    <?php if($comment_type == ‘comment’) { ?>

      <li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
        <?php echo get_avatar( $comment, 32 ); ?>
        <cite><?php comment_author_link() ?></cite> Says:
        <?php if ($comment->comment_approved == ‘0′) : ?>
          <em>Your comment is awaiting moderation.</em>
        <?php endif; ?>
        <br />
        <small class="commentmetadata"><a href="#comment-<?php
        comment_ID() ?>" title="">
        <?php comment_date(’F jS, Y’) ?>
        at <?php comment_time() ?></a>
        <?php edit_comment_link(’edit’,'  ’,”); ?></small>
        <?php comment_text() ?>
      </li>

    <?php
      /* Changes every other comment to a different class */
      $oddcomment = ( empty( $oddcomment ) ) ? ‘class="alt" ‘ : ”;
    ?>
    <?php } else { ?>
      <?php $ck_trkcnt++; ?>
    <?php } /* End of is_comment statement */ ?>
  <?php endforeach; /* end for each comment */ ?>

  </ol>
  
  <?php if($ck_trkcnt > 0) { ?>
    <h3>There are <?php echo $ck_trkcnt; ?> Trackbacks</h3>
    <ul>
      <?php foreach ($comments as $comment) : ?>
        <?php $comment_type = get_comment_type(); ?>
        <?php if($comment_type != ‘comment’) { ?>
          <li><?php comment_author_link() ?></li>
        <?php } ?>
      <?php endforeach; ?>
    </ul>
  <?php } else { ?>
    <h3>No Trackbacks Yet</h3>
  <?php } ?>

<?php else : // this is displayed if there are no comments so far ?>

After you have completed this and the last part, you have got a more organized layout for the comments section. I am assuming that you are using Wordpress 2.5 or better still, yesterday version 2.5.1 came out which fixes a lot of problems and a security hole. with that assumption, it means that your installation natively supports gravatar icons. So next time, I shall show you how to use them and how to go to town in styling the actual comments.