{"authorId":1,"title":{"title":{}},"slug":"handling-wordpress-trackbacks-with-jquery","postDate":1208213672,"expiryDate":null,"enabled":1,"fields":{"2":"<p>So after having a ton of trackbacks in a recent article, <a href=\"http:\/\/trevordavis.net\/blog\/tutorial\/the-6-most-important-css-techniques-you-need-to-know\/\">The 6 Most Important CSS Techniques You Need To Know<\/a>, I thought that it was kind of breaking up the flow of the comments.<\/p>\n\n<p>I didn&rsquo;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:<\/p>\n\n<ol>\n<li>Assign a class to all trackbacks<\/li>\n<li>Hide them all with CSS<\/li>\n<li>Add a jQuery visibility toggle<\/li>\n<\/ol>\n\n<!--more-->\n\n<h2>1) Assign a Class to All Trackbacks<\/h2>\n<p>In your <strong>comments.php<\/strong> theme file, find a line that looks like this:<\/p>\n<div class=\"codeblock\"><code>\n&lt;li&nbsp;id=\"comment-&lt;?php&nbsp;comment_ID()&nbsp;?&gt;\"&gt;&nbsp;\n\n<\/code><\/div>\n<p>And replace it with this:<\/p>\n<div class=\"codeblock\"><code>\n&lt;li&nbsp;class=\"&lt;?php&nbsp;if(get_comment_type()&nbsp;!=&nbsp;'comment')&nbsp;echo&nbsp;'trackback';&nbsp;?&gt;\"&nbsp;id=\"comment-&lt;?php&nbsp;comment_ID()&nbsp;?&gt;\"&gt;&nbsp;\n\n<\/code><\/div>\n<h3>Explanation<\/h3>\n<p>The get_comment_type function returns either <strong>comment<\/strong>, <strong>trackback<\/strong>, or <strong>pingback<\/strong>. Since I want to hide everything except comments, I filter out anything that <strong>does not equal comment<\/strong>, so I assign a class of trackback to that list item.<\/p>\n\n<h2>2) Hide them All with CSS<\/h2>\n<p>Ok, easy enough, just add the following to your stylesheet:<\/p>\n<div class=\"codeblock\"><code>\nol.commentlist&nbsp;li.trackback&nbsp;&#123;&nbsp;display:&nbsp;none;&nbsp;&#125;&nbsp;\n\n<\/code><\/div>\n\n<p>That should be pretty self explanatory.<\/p>\n\n<h2>3) Add a jQuery Visibility Toggle<\/h2>\n<p>The logic of the JavaScript will be as follows:<\/p>\n<ol>\n<li>Check to see if there are any list items with a class of trackback.<\/li>\n<li>Add a link to Show\/Hide trackbacks.<\/li>\n<li>Add a click event to the Show\/Hide trackback link.<\/li>\n<li>Update the text of the link accordingly.<\/li>\n<\/ol>\n\n<p>First, let&rsquo;s execute the JavaScript once the document is ready:<\/p>\n<div class=\"codeblock\"><code>\n$(document).ready(function()&#123;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br \/>&#125;);&nbsp;\n\n<\/code><\/div>\n\n<p>Next, let&rsquo;s check to see if there are any elements with a class of trackback:<\/p>\n<div class=\"codeblock\"><code>\n$(document).ready(function()&#123;<br \/>&nbsp;if($('.trackback').length&nbsp;&gt;&nbsp;0)&nbsp;&#123;<br \/>&nbsp;<br \/>&nbsp;&#125;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br \/>&#125;);&nbsp;\n\n<\/code><\/div>\n\n<p>Next, if there are trackbacks on the page, insert a link to show trackbacks:<\/p>\n<div class=\"codeblock\"><code>\n$(document).ready(function()&#123;<br \/>&nbsp;if($('.trackback').length&nbsp;&gt;&nbsp;0)&nbsp;&#123;<br \/>&nbsp;&nbsp;$('#comments').after('&lt;a&nbsp;href=\"#\"&nbsp;id=\"toggleTrackbacks\"&gt;(Show&nbsp;Trackbacks)&lt;\/a&gt;');<br \/>&nbsp;&#125;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br \/>&#125;);&nbsp;\n\n<\/code><\/div>\n\n<p>I am adding the show\/hide trackback link after the heading with an id of <strong>comments<\/strong>.<\/p>\n\n<p>Finally, I want to add in the <strong>click<\/strong> event to the link, and toggle the text depending upon if the trackbacks are visible or not:\n<div class=\"codeblock\"><code>\n$(document).ready(function()&#123;<br \/>&nbsp;if($('.trackback').length&nbsp;&gt;&nbsp;0)&nbsp;&#123;<br \/>&nbsp;&nbsp;$('#comments').after('&lt;a&nbsp;href=\"#\"&nbsp;id=\"toggleTrackbacks\"&gt;(Show&nbsp;Trackbacks)&lt;\/a&gt;');<br \/>&nbsp;&nbsp;$('#toggleTrackbacks').click(function()&nbsp;&#123;<br \/>&nbsp;&nbsp;&nbsp;$('.trackback').slideToggle('slow');<br \/>&nbsp;&nbsp;&nbsp;if($('#toggleTrackbacks').text()&nbsp;==&nbsp;'(Show&nbsp;Trackbacks)')&nbsp;&#123;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;$('#toggleTrackbacks').text('(Hide&nbsp;Trackbacks)');<br \/>&nbsp;&nbsp;&nbsp;&#125;&nbsp;else&nbsp;&#123;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;$('#toggleTrackbacks').text('(Show&nbsp;Trackbacks)');<br \/>&nbsp;&nbsp;&nbsp;&#125;<br \/>&nbsp;&nbsp;&nbsp;return&nbsp;false;<br \/>&nbsp;&nbsp;&#125;);<br \/>&nbsp;&#125;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br \/>&#125;);&nbsp;\n\n<\/code><\/div>\n\n<p>So basically, I am adding the jQuery <strong>slideToggle<\/strong> effect when the show\/hide trackbacks link is clicked. Then, if the text in the show\/hide trackbacks link is <strong>Show Trackbacks<\/strong>, I change it to <strong>Hide Trackbacks<\/strong>, and the opposite when the text is Hide Trackbacks.<\/p>\n\n<p>I have grabbed some of the comments from <a href=\"http:\/\/trevordavis.net\/blog\/tutorial\/the-ultimate-png-guide\/\">The Ultimate PNG Guide<\/a> so you can <a href=\"http:\/\/trevordavis.net\/play\/jquery-collapse-trackbacks\/\">see a demo of this in action<\/a>.<\/p>\n\n<p>I love how simple jQuery is.<\/p>","4":{"website":{}}}}