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
    JavaScript Promise API

    While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

  • By
    Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

Incredible Demos

  • By
    Create Keyboard Shortcuts with Mousetrap

    Some of the finest parts of web apps are hidden in the little things.  These "small details" can often add up to big, big gains.  One of those small gains can be found in keyboard shortcuts.  Awesome web apps like Gmail and GitHub use loads of...

  • By
    Rotate Elements with CSS Transformations

    I've gone on a million rants about the lack of progress with CSS and how I'm happy that both JavaScript and browser-specific CSS have tried to push web design forward. One of those browser-specific CSS properties we love is CSS transformations. CSS transformations...

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!