Set Up Your WordPress Blog To Allow Trackback Toggling

By  on  

One aspect of WordPress I dislike is that trackbacks display as a comment with the rest of a post's comments. Trackbacks are a nuisance when there's a great conversation going within the post's comments. Some users, however, love trackbacks so I can't simply get rid of them. I know there are plugins available to separate trackbacks from post comments, but I've chosen a different approach.

Using PHP, MooTools JavaScript, and simple CSS, I've added functionality to my website to toggle trackback display at the click of a link. Want to do the same? Follow these steps.

Step 1: The PHP/XHTML

You'll need to add a CSS class, trackback, to the comment's wrapper DIV if the comment type is trackback.

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

Step 2: The CSS

Declare the trackback class in your stylesheet. Also, define the toggle link as an ID(#).

.trackback	{ display:none; }
#toggle-tb-link	{ display:block; float:right; font-size:11px; font-family:arial; font-weight:normal; margin:0 10px 0 0; color:#090; }

Step 3: The Moo

Using MooTools, we create a JavaScript function that sets the wrapper DIV's CSS display property and link message depending on whether the trackbacks should show or hide.

//trackback toggle
function toggle_trackbacks()
{
	//for every trackback div...
	$$('.trackback').each(function(el) {
		//show or hide the trackbacks
		el.setStyle('display',(el.getStyle('display') == 'block' ? 'none' : 'block'));
	});

	//set the link text
	$('toggle-tb-link').setText(($('toggle-tb-link').getText() == 'Hide Trackbacks' ? 'Show' : 'Hide') + ' Trackbacks');
}

Step 4: Create the Link

Now that all of the functionality in place, we can add the link anywhere on our page.

<a href="javascript:toggle_trackbacks();" class="no-print" id="toggle-tb-link">Show Trackbacks</a>

You don't need to use MooTools for this project, but like MooTools does for every other part of my blog, I can create a lot of functionality with a little bit of code.

No Trackbacks? No Problem!

I've also added the following snippet of code to hide the toggle link if there are no trackbacks:

//manage trackback link
window.addEvent('domready',function() {
	if(!$$('.trackback').length) { $('toggle-tb-link').setStyle('display','none'); }
});

Have any suggestions for this system?

Recent Features

  • By
    How to Create a Twitter Card

    One of my favorite social APIs was the Open Graph API adopted by Facebook.  Adding just a few META tags to each page allowed links to my article to be styled and presented the way I wanted them to, giving me a bit of control...

  • By
    How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

Incredible Demos

  • By
    CSS Counters

    Counters.  They were a staple of the Geocities / early web scene that many of us "older" developers grew up with;  a feature then, the butt of web jokes now.  CSS has implemented its own type of counter, one more sane and straight-forward than the ole...

  • By
    Hot Effect: MooTools Drag Opacity

    As you should already know, the best visual features of a website are usually held within the most subtle of details. One simple trick that usually makes a big different is the use of opacity and fading. Another awesome MooTools functionality is...

Discussion

  1. Most excellent David! I’m going to implement this. Nice work!

  2. Thanks a bunch! Just what I’ve been looking for. :)

  3. i want to make one of my page are only show any trackback to that page. trackback showed as page post and not in comments field so if people see that page they can read the trackback in a few character. I want to use that page as a portal to my another website and the trackback functions are “the lates post” from my another site. any suggestion or tutorial? i start to getting headache try to find the right script to make this happen ..

    thanx before

  4. Brillant idea, I’m going to implement. But first a question. I’ve enabled pingbacks but I’m not getting any. Do I have to also enable comments to get trackbacks and pingbacks? Kind of the opposite problem to your solution. Thanks, Linda

  5. I couldnt understand if I have a enabled trackbacks or not. but I need some help with sending trackbacks to other sites. trackback option is missing in my posts. how do i enable it. any help appreciated.

  6. Howdy, i read your blog occasionally and i own a similar one
    and i was just curious if you get a lot of spam responses?
    If so how do you reduce it, any plugin or anything you can advise?
    I get so much lately it’s driving me mad so any assistance is very much appreciated.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!