Separating and Hiding Trackbacks with Jquery in WordPress 2.7
Posted
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:
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.
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.