Separate Trackbacks, Style Comments in WordPress 2.7

How do you separate comments from trackbacks, and style comments in Wordpress 2.7 blogs? The latest WP version brought in some amazing new functionality to comments (like comment threading, paging) and some new template tags and CSS classes which made WordPress comments easier to work with and enabled easier customized styling.

New Comment Options in WordPress 2.7

We wanted to start threaded comments on our blog and also get rid of the wp-comments-post.php errors, so we needed to upgrade the QOT wordpress theme.  Our current theme has seperated comments and trackbacks, and hidden trackbacks – so how difficult could it be in WP 2.7.

I downloaded a fresh wordpress package and sourced the latest comments.php from the default theme. Then I replaced my custom comments.php with the new file. The first thing you notice is a new template tag wp_list_comments which replaces a lot of earlier comments code. This single unified class has lots of powerful arguments which can enhance the way this works to customize your template even further.

<?php wp_list_comments('arguments'); ?>

This powerful template tag sources out an amazing array of classes which can be easily styled. Also because of this new tag, most of the earlier tutorials to separate comments and trackbacks fail.

Separate Comments and trackbacks in Wordpress 2.7

I found this nice tutorial to separate comments and trackbacks in WP 2.7. I started with single.php and replaced -

<?php comments_template(); ?>
with
<?php comments_template('', true); ?>

Then you need to separate comments and pings in comments.php. Replace the following code

<h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to &#8220;<?php the_title(); ?>&#8221;</h3>
<ol class="commentlist">
<?php wp_list_comments(); ?>
</ol>

with this code to separate comments and pings

<?php if ( ! empty($comments_by_type['comment']) ) : ?>
<h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to &#8220;<?php the_title(); ?>&#8221;</h3>
<ol class="commentlist">
<?php wp_list_comments('type=comment'); ?>
</ol>
<?php endif; ?>
<?php if ( ! empty($comments_by_type['pings']) ) : ?>
<h3 id="pings">Trackbacks/Pingbacks</h3>
<ol class="commentlist">
<?php wp_list_comments('type=pings'); ?>
</ol>
<?php endif; ?>

Correct Comments Count in Wordpress 2.7

So now the comments and trackbacks were separated, but the comments count was totally wrong as it was the total of both. So the tutorial taught us to add some more code to functions.php (we already had this template file because we widget enabled our theme earlier)

<?php
add_filter('get_comments_number', 'comment_count', 0);
function comment_count( $count ) {
if ( ! is_admin() ) {
global $id;
$comments_by_type = &separate_comments(get_comments('status=approve&post_id=' . $id));
return count($comments_by_type['comment']);
} else {
return $count;
}
}
?>

Hide Trackbacks in Wordpress 2.7

Now we wanted to hide trackbacks. There is a tutorial to do this  using  jquery, but that seemed too technical for me. So I simply deleted out the trackbacks code which we had earlier used to separate pings from comments …. and trackbacks are gone. This does not mean trackbacks have stopped been recorded, they are merely not displaying. If you add the code back, the trackbacks will start displaying. We deleted this -

<?php if ( ! empty($comments_by_type['pings']) ) : ?>
<h3 id="pings">Trackbacks/Pingbacks</h3>
<ol class="commentlist">
<?php wp_list_comments('type=pings'); ?>
</ol>
<?php endif; ?>

For some reason, the comment navigation still kept showing “Newer Comments”, though comments pages were not activated. So I deleted the navigation code also. Remember this code IS required if you have enabled comments paging. Since we had only comment threading enabled, we could do away with this code.

 <div class="navigation">
<div class="alignleft"><?php previous_comments_link() ?></div>
<div class="alignright"><?php next_comments_link() ?></div>
</div> 

Styling CSS  in Wordpress 2.7

Styling comments is easy, provided you know which classes to target and edit in your CSS file. This tutorial gives you a breakdown of the huge number of classes which this wp_list_comments tag incorporates. Notice that you need to syle a new class commentlist and lists tags like comment, children, comment-meta, reply, ol, li etc. Simple adding these classes to your style.css will let you style any component of your comments. View the source code of any post page to see the huge range of classes available. For example

ol.commentlist { list-style:none; margin:0 0 1em; padding:0; }
ol.commentlist li.comment { border-bottom:1px dotted #666; padding:1em; }

For Alternate background colors of odd/even comments, use this
ol.commentlist li.even { background:#fff; }
ol.commentlist li.odd { background:#f6f6f6; }

This is how we have separated the trackbacks/pingbacks from comments, hidden the trackbacks and styled our comments in WordPress 2.7. You can check out our new threaded comments and see if you like how they work.