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

Incredible Demos

  • 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...

  • By
    Facebook Sliders With Mootools and CSS

    One of the great parts of being a developer that uses Facebook is that I can get some great ideas for progressive website enhancement. Facebook incorporates many advanced JavaScript and AJAX features: photo loads by left and right arrow, dropdown menus, modal windows, and...

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!