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:
- Assign a class to all trackbacks
- Hide them all with CSS
- 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:
- Check to see if there are any list items with a class of trackback.
- Add a link to Show/Hide trackbacks.
- Add a click event to the Show/Hide trackback link.
- 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.
Categories
Recent Articles
February 2012
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 |
5 Comments
Mike Schinkel
04.15.2008Brilliant! I’ve always disliked how distracting trackbacks are in the comment stream. This is exactly the type of thing I was talking about when I made those comments to you offline about your theme. Bravo!
Trevor
04.15.2008@Mike-
Great, glad it’s useful. Hopefully in the next few months I will have my theme available for download.
BTW, thanks for letting me know about the tab order of my comment form. I hate the tabindex attribute; it does nothing but cause trouble.
Calaelen
05.12.2008Why do you want to hide trackbacks?
I mean, they are “comments” aswell. Well, comments that were written on another site instead of a direct answer under your blog entry.
That’s what blogging was all about in the past? :o
Trevor
05.12.2008@Calaelen-
I don’t want trackbacks to display by default because they break up the flow of the comments. Just like you said, trackbacks are “comments”.
If people are reading the comments on one of my blog entries, they typically are not coming to see what sites have linked to it. This is why I still want trackbacks available if people want to see them.
StumbleUpon
08.16.2008Thanks for the informative post.. and thanks for adding our comment to the blog. I am subscribing to your feed so I don’t miss the next post!
Too late, comments are closed!
Don’t worry, you can email me or contact me on Twitter.