Handling WordPress Trackbacks with jQuery

Posted on April 14, 2008 in Tutorial | 5 Comments »

So after having a ton of trackbacks in a recent article, The 6 Most Important CSS Techniques You Need To Know, I thought that it was kind of breaking up the flow of the comments.

I didn’t necessarily want to completely remove them because I thought that some people might be interested in them. These are the steps that I want to take:

1. Assign a class to all trackbacks
2. Hide them all with CSS
3. Add a jQuery visibility toggle

1) Assign a Class to All Trackbacks

In your comments.php theme file, find a line that looks like this:

<li id="comment-<?php comment_ID() ?>">

And replace it with this:

<li class="<?php if(get_comment_type() != 'comment') echo 'trackback'; ?>" id="comment-<?php comment_ID() ?>">

Explanation

The get_comment_type function returns either comment, trackback, or pingback. Since I want to hide everything except comments, I filter out anything that does not equal comment, so I assign a class of trackback to that list item.

2) Hide them All with CSS

Ok, easy enough, just add the following to your stylesheet:

ol.commentlist li.trackback { display: none; }

That should be pretty self explanatory.

3) Add a jQuery Visibility Toggle

The logic of the JavaScript will be as follows:

1. Check to see if there are any list items with a class of trackback.
2. Add a link to Show/Hide trackbacks.
3. Add a click event to the Show/Hide trackback link.
4. Update the text of the link accordingly.

First, let’s execute the JavaScript once the document is ready:

$(document).ready(function(){

});

Next, let’s check to see if there are any elements with a class of trackback:

$(document).ready(function(){
	if($('.trackback').length > 0) {

	}
});

Next, if there are trackbacks on the page, insert a link to show trackbacks:

$(document).ready(function(){
	if($('.trackback').length > 0) {
		$('#comments').after('<a href="#" id="toggleTrackbacks">(Show Trackbacks)</a>');
	}
});

I am adding the show/hide trackback link after the heading with an id of comments.

Finally, I want to add in the click event to the link, and toggle the text depending upon if the trackbacks are visible or not:

$(document).ready(function(){
	if($('.trackback').length > 0) {
		$('#comments').after('<a href="#" id="toggleTrackbacks">(Show Trackbacks)</a>');
		$('#toggleTrackbacks').click(function() {
			$('.trackback').slideToggle('slow');
			if($('#toggleTrackbacks').text() == '(Show Trackbacks)') {
				$('#toggleTrackbacks').text('(Hide Trackbacks)');
			} else {
				$('#toggleTrackbacks').text('(Show Trackbacks)');
			}
			return false;
		});
	}
});

So basically, I am adding the jQuery slideToggle effect when the show/hide trackbacks link is clicked. Then, if the text in the show/hide trackbacks link is Show Trackbacks, I change it to Hide Trackbacks, and the opposite when the text is Hide Trackbacks.

I have grabbed some of the comments from The Ultimate PNG Guide so you can see a demo of this in action.

I love how simple jQuery is.

• Grab the RSS feed of comments for this entry