WP resource: Enhancing Trackback links in WordPress
Yeah, more of the WordPress chit-chat. I really should get to posting more often in those other categories I’ve got around here…Anyway, in regards to this post, I see the occasional wish/request/bitching on the support forums for how one can improve the display of a post’s trackback link. Here’s one way.
Linking to a trackback, as opposed to just displaying the URL in some textual fashion round about the comments section of a post, is a bit of a problem in WordPress. This is because it doesn’t really take you anywhere, at least not in the way one tends to expect, if you follow the link. The point of a trackback URL is to—and hopefully this is obvious—send a trackback “ping” from somewhere else, preferably another blog. Doing anything else with it is like banging on a door with no house attached, and as far as WordPress is concerned this is a pretty stupid thing to do. So if you visit a trackback URL from a WordPress blog, WordPress assumes you’re more interested in the post it derives from, and redirects you to it.
All well and good for those who understand why it works the way it does: just right-click or hover over the link and perform a bit of copy/paste. But for anyone new to WordPress, or anyone not the least bit interested in anything but getting that damn link to show a Trackback!!!, this is a confusing way to behave. As mentioned above, one can skip the link method and just display the trackback URL raw, but some don’t find this a good way of dealing with it. And on sites with especially long URLs, it causes issues when the URL is wider than the blog’s content area.
Solution time! If you click the Trackback URL link at the end of this post—and Javascript in your browser is on and allows link popups—you’ll see something a bit different than the normal page blink a WordPress blog typically delivers. To some the explanation will be immediately obvious. But as I’m not writing for them, the rest of you continue reading. This is a long document, so keep in mind there are really just three things you need to do to set this up: Add the Javascript for the popup window, create a trackback popup page, and edit the trackback link in your templates.
Popup Window Javascript
First and foremost, I’m using Javascript to deliver a popup window with the “trackback page.” Looking at the source of the page you’re now reading in your browser, one finds the TrackbackWindow Javascript function in the <head> element. Here’s pretty much what resides in my theme’s header.php template for this, starting just with the PHP “wrapper” for the Javascript code:
<?php
if(is_single() || is_page()) : // trackback js
global $post; // scope $post object
$var = (is_page()) ? 'page_id' : 'p'; // determine query_var
?>
<?php endif; // trackback js ?>
Note the use of conditional tags for the PHP if statement, in this case is_single() OR is_page(), which tests if one is on a single post or Page query. As I don’t list trackback links unless one is reading a post or Page, there’s no reason for me to display the Javascript at other times. I also scope or set the $post object to global to access the post ID; you’ll see why in a bit. The $var is set to switch between p and page_id, depending on the type of query dealt with (post or Page). Here’s the actual Javascript:
<script type="text/javascript">
<!--
function TrackbackWindow() {
window.open('<?php bloginfo('home'); ?>/trackback-popup.php?<?php echo $var; ?>=<?php the_ID(); ?>', 'trackback', 'width=425 ,height=300, toolbar=no, menubar=no, statusbar=no');
}
//-->
</script>
I insert this into the <head> between the if/endif. Normally I might add the function in a separate js (Javascript) file and include it like so:
<script type="text/javascript" src="trackback.js"></script>
But that won’t work for our purposes. Notice the PHP tags within the Javascript displaying the ‘home’ URL (in bloginfo()), the (hopefully) correct $var being echoed for the query, and post ID. I could get away with hard coding the home URL, but $var and post ID are dependent on what post or Page I’m on (i.e. the current $post object), and this needs to be passed to trackback-popup.php. There’s no bridge between PHP and Javascript files over which you can transfer variable values and whatnot, but nothing is stopping us from dropping PHP variables into Javascript embedded in the page.
Note the various window properties (width, height, toolbar, etc.) can be modified, trimmed or added to suit your needs. Here’s a couple helpful sites for creating Javascript popup windows:
Finally, the entire code block as it exists (pretty much) in my header.php:
<?php
if(is_single() || is_page()) : // trackback js
global $post; // scope $post object
$var = (is_page()) ? 'page_id' : 'p'; // determine query_var
?>
<script type="text/javascript">
<!--
function TrackbackWindow() {
window.open('<?php bloginfo('home'); ?>/trackback-popup.php?<?php echo $var; ?>=<?php the_ID(); ?>', 'trackback', 'width=425 ,height=300, toolbar=no, menubar=no, statusbar=no');
}
//-->
</script>
<?php endif; // trackback js ?>
Trackback Popup Page
With the Javascript for the popup window in place, we need the actual page that opens in it. I call mine “trackback-popup.php”, but you can use any filename you like (make sure to change it in the Javascript window.open URL above). I also have it in my blog’s root or top directory, but save it to where you feel it fits best (again, correct the window.open URL!).
Your popup page’s design can be as complex or as simple as you like. See the WordPress Codex for various resources on the topic of CSS and HTML. You may have noticed (if you followed the previous suggestion and clicked my Trackback link below) mine is a subset of the guff layout or theme. In the end all that matters is it has these three features:
1. Include wp-blog-header.php
Your trackback popup page is not considered part of the template hierarchy in WordPress. Therefore you need to include WordPress’ wp-blog-header.php file, located in the root of your WordPress installation, so it can become *WordPress-aware*. Do this by inserting an include() at the beginning of the trackback popup page:
<?php include('./wp-blog-header.php'); ?>
The key is assuring the path to wp-blog-header.php is correct: the ./ notation tells PHP the file is found in the current directory. If wp-blog-header.php is in a subdirectory–say ‘wp’–from where the trackback popup page resides, change it to:
<?php include('./wp/wp-blog-header.php'); ?>
You can also use a full or absolute path (what this is will depend on your server’s configuration):
<?php include('/home/moi/public_html/wp/wp-blog-header.php'); ?>
With wp-blog-header.php included in your page, you can make use of any WordPress feature, such as The Loop, the “get” or include tags for your template’s elements, and so on.
2. The Loop
All post handling in WordPress is typically done through The Loop. For our purposes it can be a very simple one that only initializes the post or Page:
<?php the_post(); ?>
For sanity’s sake we’ll make it a bit more robust and verify a valid post or Page ID has been provided:
<?php if(have_posts()) : the_post(); ?>
~Trackback info will go here~
<?php else : ?>
<p>The article ID provided is not valid.</p>
<?php endif; ?>
My popup page goes even further by verifying we’re on a single post or Page query:
<?php if(is_single() || is_page()) : ?>
<?php if(have_posts()) : the_post(); ?>
~Trackback info will go here~
<?php else : ?>
<p>The article ID provided is not valid.</p>
<?php endif; else : ?>
<p>An article ID must be provided.</p>
<?php endif; ?>
3. Trackback URL
How you display the trackback info in The Loop is up to you, but here’s a simple example (buried in the version of The Loop just above):
<?php if(is_single() || is_page()) : ?>
<?php if(have_posts()) : the_post(); ?>
<p>Trackback URL for <?php the_title(); ?>:</p>
<p><?php trackback_url(); ?></p>
<?php else : ?>
<p>The article ID provided is not valid.</p>
<?php endif; else : ?>
<p>An article ID must be provided.</p>
<?php endif; ?>
Here is my trackback popup page or template for sampling: guff’s trackback-popup.php. I don’t recommend duplicating it except in rough outline. I’ll point out a few things, though:
- You’ll notice I don’t use
get_header(),get_footer(), and so on in this “template.” The design is similar to my site, but it’s a streamlined, cutdown version of it. And as I want to focus only on the trackback info, I decided to avoid the bloat the theme’s templates would have added. - I also slipped
<meta name="robots" content="noindex,nofollow">into the<head>of the page. I didn’t see a need to have it showing up in searches on Google and the rest, so I chose to warn off any searchbots stumbling around my site.
Edit Trackback Link
After all that, this final step must be a real doozy! Well here goes…locate the template where your Trackback link is displayed. For the default theme this is single.php. Other themes may place it in the comments.php template. As an example, here’s the line in the default theme’s single.php:
Responses are currently closed, but you can <a href="<?php trackback_url(true); ?> " rel="trackback">trackback</a> from your own site.
Now just add this attribute to the link or <a> tag:
onclick="TrackbackWindow(); return false"
So now the default theme’s trackback link will be:
Responses are currently closed, but you can <a href="<?php trackback_url(true); ?>" onclick="TrackbackWindow(); return false" rel="trackback">trackback</a> from your own site.
That’s it. There ain’t no more to do here. Ok, maybe there’s a bit more. It’s possible your current theme doesn’t have a link for trackbacks, or displays the url raw instead of a link. For the former you need to select an appropriate place in your theme’s templates to insert the trackback link; but in either situation all you need add is:
<a href="<?php trackback_url(); ?>" onclick="TrackbackWindow(); return false" rel="trackback">Trackback URL</a>
Finally
I really am done, but I thought it would help if I collected the various components needed to set this up on your own in one easy to hit space:
Author: Kaf Oseo
Categories: WordPress
Comments: (11) · Leave a comment · Comments RSS2
I too have had trouble finding out about trackbacks, there is very little in the WP codex. Excuse me if I ask an even more Newbie question…
“As a blog writer, how do I use a trackback to another blog?”
I have read the wiki and know what they are for, but I can find nothing about how it is done.
e.g. I find a post on someone else’s blog that I wish to remark on in my own. At the end of the article is a trackback URL which I can right click copy. I am writing my own blog posting, what do I do with the URL? Do I just use it as a link to his post instead of the permalink? How does that tell him that I have posted a comment? it seems entirely passive.
p.s. I have disabled commenting on my own blog for the moment, does that affect anything above?
Kafkaesquí, Kafkaesquí, where art thou Kafkaesquí?
Please come back. Moi and those other folks, too.
Don’t let sandwiches take away your cyberspace spoutings. We need you.
Good info. To answer the question about how to send a trackback, there are a couple of options. First, in WordPress (and presumably in other software) there is a Trackback URI field in the compose window. Fill in the trackback URI’s you want to ping when the story is published, and WordPress does the pinging for you. The other option is to use a standalone tackback pinger. I found one here:
http://www.aylwardfamily.com/content/tbping.asp
Now I just need to figure out how to get the trackback ping to send the permalink instead of the /?p=### ugly link in WordPress. Figure that out for me and I’d be really happy. :)
great ideas
tnx
Any chance of putting all of them together to act as a single plugin?
I was struggling to get it work here: ChristophDollis.com/blog/ — the place to come for more appointments, more people in the door, and more sales!(sm) and for some reason, just couldn’t.
And yet this is probably the best documented, most detailed ever tutorial I’ve ever seen. I must be just tired.
Basically, no matter how many times I did it when I clicked the link on the MAIN page (the only place I want trackback links, a raw URL on the post page is fine) nothing happened except it exhibited the default WordPress behaviour.
In the end, I said to heck with it and just made a regular non-Javascript dependent link from my main page(s) including category and date archives to the raw trackback URL on the post page.
I used this code on the theme index.php:
<a href=”<?php the_permalink() ?>#pings”>Trackback URL</a>
… and on single.php:
<a id=”pings”></a>Trackbacks/Pings</strong><br />The trackback URL for this post is:<br /><?php trackback_url(true); ?>
If anyone has trouble getting this to work, i.e., if any one can match me for not getting the point!, you could try this solution. Would take five minutes.
If anyone wants to try the above, make sure you replace the curly quotes with real ones.
Good night all! Love the web design and the solution, had I made it work, would have rocked. Really over and above what most people are doing with their blogs.
Excellent tutorial, it really worked for me.
It works great.
But it only shows link as Trackback URL for this post:”track back url” instead of hyperlink url.
I want full link url as tracback url.
I made a change and edit the code as-
<a href=”" onclick=”TrackbackWindow(); return false” rel=”">
It shows the full dynamic url in trackback urls and directly linked to the blog.