Set Up Your WordPress Blog To Allow Trackback Toggling

Written by David Walsh on March 21, 2008 · 5 Comments

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?

Comments

  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.

Be Heard

Tip: Wrap your code in <pre> tags or link to a GitHub Gist!

Use Code Editor
Older
Creating Advanced XHTML Email Links: Include Subject, CC, BCC, and Email Body
Newer
Weekend Links - Facebook Instant Messenger, Developer's Work Environment, CSS Lists, MooTools Snippely, Regular Expressions