O'Reilly

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?

Track.js Error Reporting

Recent Features

  • Chris Coyier&#8217;s Favorite CodePen Demos

    David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...

  • CSS Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome,...

Incredible Demos

  • CSS Rounded Corners

    The ability to create rounded corners with CSS opens the possibility of subtle design improvements without the need to include images.  CSS rounded corners thus save us time in creating images and requests to the server.  Today, rounded corners with CSS are supported by all of...

  • Create Your Own Dijit CSS Theme with LESS CSS

    The Dojo Toolkit seems to just get better and better.  One of the new additions in Dojo 1.6 was the use of LESS CSS to create Dijit themes.  The move to using LESS is a brilliant one because it makes creating your own Dijit theme...

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!

Recently on David Walsh Blog

  • Loading Static Templates for Intern Testing

    I use Intern by SitePen for all of my JavaScript functional testing.  Intern has loads of features other functional test frameworks don't and it's completely Promise-based -- something I got very used to when I used the Dojo Toolkit every day. Async test creation can...

  • Convert Video to mp3

    Let's all be honest for a moment:  we've all ... not paid for ... music.  Whether it was via a file sharing app like Kazaa or Napster, or it was downloading and seeding on bittorrent, or maybe even downloading a music video and ripping its audio,...

  • Sort git Branches by Date

    I'll be first person to admit I don't do as much git repository maintenance as I should.  I rarely delete branches which have been merged, so a git branch execution shows me a mile-long list of branches that likely aren't relevant.  The best way to find branches I've recently...

  • Best Tools and Resources for Web Professionals in 2015

    Looking for the right resources to help you satisfy the needs of your clients? On the lookout for the best tools to help you increase your revenue? Searching for the right software to help you improve your business? Well, then you’ve come to the right place....

  • JavaScript Polling

    Polling with JavaScript is one of those ugly but important functions within advanced front-end user experience and testing practices.  Sometimes there isn't the event you can hook into to signify that a given task is complete, so you need to get your hands dirty and simply poll for...