If you’re designing and coding themes for WordPress, please, I beg you, for love of all that is digitized and Tron like, separate your trackbacks and pingbacks from your comment threads. There is nothing more frustrating than having to navigate through a horde of unholy spam links to see the next comment in a thread. I also personally believe(ie I have no proof whatsoever) that a comment threat mucked with trackbacks correlates directly with less commenting. But trackbacks aren’t all bad, some people (not me) use them to find out more about the blog post, theme, story, whatever…so I wouldn’t just toss them aside like fruit cake.

If you look at most new well thought out themes, trackbacks are separated into another tab, or somehow minimized/hidden from the user that doesn’t want them. WordPress 2.7 changed the commenting code quite a bit, and now separating everything is even easier. Add a little jQuery magic and you can hide and show those trackbacks on demand. Enough with this banter, lets rock out with our text-editor out.

First a little catchup

So things are a wee bit different in the ol’ comment file in Wordpress 2.7. I highly suggest taking a peek at Otto’s WordPress 2.7 Comments Enhancements if you haven’t already. He outlines how the new comment loop works, and all the spiffy javascript for threaded comments.

Once you got a grasp on the comment changes in 2.7, checkout Matt’s article on separating pings from comments. I’m not going to go into too much detail so if you find yourself not understanding a part of the code, try checking out those articles.

Separation makes the heart grow fonder of pings

I think that is the saying. Lets start with the comment loop, first the whole thing,

if ( have_comments() ) : ?>
	<h3 class="comment_title"><?php comments_number('No Comments', 'One Comment', '% Comments' );?></h3>
		<ol class="commentlist" id="singlecomments">
			<?php wp_list_comments(array('avatar_size'=>48, 'reply_text'=>'Reply', 'type'=>'comment')); ?>
		</ol>

	<h3 class="trackback_title">Trackbacks / Pingbacks</h3>
	<a href="#pings" class="show_trackbacks">show trackbacks</a>
		<ol id="pings" class="trackback">
			<?php wp_list_comments('type=pings'); ?>
		</ol>

	<div class="comments-navigation">
		<div class="alignleft"><?php previous_comments_link() ?></div>
		<div class="alignright"><?php next_comments_link() ?></div>
	</div>
 <?php else : // this is displayed if there are no comments so far ?>

	<?php if ('open' == $post->comment_status) :
		// If comments are open, but there are no comments.
	else : 
		// comments are closed 
	endif;
endif;

There is the comment loop with the trackbacks already separated. The only trick to the separation is setting the ‘type‘ option for the wp_list_comments function. Set the ‘type’ to ‘comment’, for comments, and pings for …well pings(trackbacks). Simple enough right? Let’s take a closer look at the HTML.

<h3 class="comment_title"><?php comments_number('No Comments', 'One Comment', '% Comments' );?></h3>
		<ol class="commentlist" id="singlecomments">
			<?php wp_list_comments(array('avatar_size'=>48, 'reply_text'=>'Reply', 'type'=>'comment')); ?>
		</ol>

	<h3 class="trackback_title">Trackbacks / Pingbacks</h3>
	<a href="#pings" class="show_trackbacks">show trackbacks</a>
		<ol id="pings" class="trackback">
			<?php wp_list_comments('type=pings'); ?>
		</ol>

This is really the meat of the code, you can see the two blocks of code, one for comments and one for pings. The only real differences are setting the ‘type’ for wp_list_comments and changing the id and class names for styling. There is also one addition for the pings, a link to show them(it has a class of ’show_trackbacks’). You can either put this link in the actual code, or inject it using javascript.

The jQuery

There’s a few ways to do this but I’m going to go with a simple slide up and slide down. First we’ll hide the trackbacks by calling slideUp() then add a function to detect the click on our show_trackbacks link which will call slideDown().

$('ol.trackback').slideUp();
$('.show_trackbacks').click(function(){
	$('ol.trackback').slideDown();
});

That’s it?? Yeah, pretty simple actually, so I’ll leave you with something else useful. A full comment file ready for wordpress 2.7.

The whole thing

<?php // Do not delete these lines
if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
	die ('Please do not load this page directly. Thanks!');
if ( post_password_required() ) { ?>
	<p class="nocomments">This post is password protected. Enter the password to view comments.</p>
<?php
	return;
}

// add a microid to all the comments
function comment_add_microid($classes) {
	$c_email=get_comment_author_email();
	$c_url=get_comment_author_url();
	if (!empty($c_email) && !empty($c_url)) {
		$microid = 'microid-mailto+http:sha1:' . sha1(sha1('mailto:'.$c_email).sha1($c_url));
		$classes[] = $microid;
	}
	return $classes;	
}
add_filter('comment_class','comment_add_microid');

//Change date format
function change_comment_date($datestring, $dateformat) {
global $comment;
return mysql2date('F j y', $comment->comment_date);
}
add_filter('get_comment_date','change_comment_date',10,2);

// show the comments
if ( have_comments() ) : ?>
	<h3 class="comment_title"><?php comments_number('No Comments', 'One Comment', '% Comments' );?></h3>
		<ol class="commentlist" id="singlecomments">
			<?php wp_list_comments(array('avatar_size'=>48, 'reply_text'=>'Reply', 'type'=>'comment')); ?>
		</ol>

	<h3 class="trackback_title">Trackbacks / Pingbacks</h3>
	<a href="#pings" class="show_trackbacks">show trackbacks</a>
		<ol id="pings" class="trackback">
			<?php wp_list_comments('type=pings'); ?>
		</ol>

	<div class="comments-navigation">
		<div class="alignleft"><?php previous_comments_link() ?></div>
		<div class="alignright"><?php next_comments_link() ?></div>
	</div>
 <?php else : // this is displayed if there are no comments so far ?>

	<?php if ('open' == $post->comment_status) :
		// If comments are open, but there are no comments.
	else : 
		// comments are closed 
	endif;
endif; 

if ('open' == $post-> comment_status) : 

// show the form
?>
<div id="respond"><h3><?php comment_form_title( 'Leave a Reply', 'Leave a Reply to %s' ); ?></h3>

<div id="cancel-comment-reply">
	<small><?php cancel_comment_reply_link(); ?></small>
</div>

<?php if ( get_option('comment_registration') && !$user_ID ) : ?>

<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">logged in</a> to post a comment.</p>

<?php else : ?>

<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform" class="span-17">

	<div>
	<?php comment_id_fields(); ?>
	<input type="hidden" name="redirect_to" value="<?php echo htmlspecialchars($_SERVER["REQUEST_URI"]); ?>" /></div>

	<p><small><strong>XHTML:</strong> You can use these tags: <?php echo allowed_tags(); ?></small></p>

	<p><textarea name="comment" id="comment" cols="10" rows="10" tabindex="4"></textarea></p>

	<?php if (get_option("comment_moderation") == "1") { ?>
	 <p><small><strong>Please note:</strong> Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.</small></p>
	<?php } ?>


<?php if ( $user_ID ) : ?>

<p class="loggedin">Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>.
<a href="<?php echo wp_logout_url(get_permalink()); ?>" title="Log out of this account">Logout &raquo;</a></p>

<?php else : ?>

<p><label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label>
<input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" /></p>
<p><label for="email"><small>Email <?php if ($req) echo "(required)"; ?></small></label>
<input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" /></p>
<p><label for="url"><small>Website</small></label>
<input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" /></p>

<?php endif; ?>

<p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" /></p>
<?php do_action('comment_form', $post->ID); ?>
</div>

</form>

<?php 
endif;

endif;