Separate Trackbacks, Style Comments in WordPress

By Posted 2009 Updated   BloggingTutorialsWordPress

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

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

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

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

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.


10 comments on “Separate Trackbacks, Style Comments in WordPress

  1. Jenny@Another Jennifer Speaks says:

    awesome. exactly what i was looking for. but i have a question. how would i get the trackbacks to show just the title and not the excerpt?

  2. TeMc says:

    Good question. Same here.

  3. BadGirl42 says:

    Do you think people would be happy, if government just implemented a tax called ‘pay the rich’ and took millions of dollars to pay few selected individuals? ,

  4. Alex59 says:

    Family meetings begin with the family team members being introduced to each other. ,

  5. Michael Soriano says:

    I followed your tutorial and it’s working 95 percent – it seems that wp_list_comments(‘type=comment’) is still not filtering out the pings:

    http://fearlessflyer.com/2009/08/get-kubrick-on-crack/#comments

    What am I doing wrong?

  6. Zack says:

    Thanks for this great tut, I’ve got one problem, after modification, my comment navigation disappeared, is this happen to you too?

    http://zacklive.com/separate-trackbacks-from-comments-in-wordpress-2-7/1022/

  7. neslihan says:

    awesome thx 4 sharing :))

  8. iOS AppsOnline says:

    Application reskins can help improve/enable changes to the app without starting from scratch. Reskin the app you want, and create something spectacular at a fraction of the cost.

    http://iosappsonline.com/app_reskins.php

Leave a Reply

Your email address will not be published. Required fields are marked *




css.php