8 Ways to Sunday

With permalinks and trackback URIs based on post titles, one of WordPress’ minor annoyances is trackback URIs which — in some Mozilla-based browsers — slide all the way off the edge of your screen when displayed in individual entries. Not only ugly, but also impractical for anyone who wants to trackback to your post. Fortunately, this beast is easy to tame with a little CSS magic.

To make this change, you’ll need to edit your weblog’s style sheet and a file called wp-comments.php, both of which live in the root directory of your web site.

This is easy to do in version 1.2 or WordPress (available as a final release candidate as of this writing). Just log in as an administrator and click on the “Templates” option in the menu bar. To edit your style sheet, scroll down the page to the text box with the “Edit file »” button next to it and type the name of your CSS file there (wp-layout.css by default). Click the button, and you’re ready to go to work. To edit your wp-comments.php file, you don’t even need to enter a file name. Just click on the “Comments” link below the text box. If you get an error message about not having permission to edit a file, or if you have an older version of WordPress, this forum topic should get you started in the right direction.

Before we get underway, you should find an entry on your blog that’s an egregious example of this kind of problem. Keep it open in a separate window or tab so that you can monitor the results of your changes and make sure you like the result. This will usually be an entry with an especially long title. Got one ready? Okay, let’s begin.

Let’s start with the CSS file that controls your blog’s appearance. The first thing you want to do is make sure your style sheet contains the following class:

.meta {
	font-size: .75em;
}

This class declaration is standard in the default style sheet, and is used to style the information about your post that appears below its title. If you’ve made dramatic changes to your style sheet and .meta no longer exists, then you can just add the font-size declaration into this piece, which you need to add to your style sheet:

#trackback-uri {
	overflow:auto;
	min-height:4.5em;
}

The “overflow:auto” declaration means that when the trackback URI returned by WordPress becomes longer than the div holding your entry content, scrollbars are automatically added to the element to which this id is applied. The min-height declaration makes sure that the div we’ll be putting our trackback URI info into is tall enough that we don’t accidentally end up with both horizontal and vertical scrollbars. I based the value for this declaration on the fonts and font sizes used in my own blog, so your mileage may vary. You can always make it larger or smaller to suit your needs.

You’re done with the CSS file now, so click on the “Update File »” button (assuming you’re using WP 1.2) to save your changes to the style sheet, and open wp-comments.php for editing.

Look for the following lines in the file, which should appear about a third of the way through, around line 32:

<p><?php _e("The <acronym title=\"Uniform Resource Identifier\">URI</acronym> to TrackBack this entry is:");?> <em><?php trackback_url()?></em></p>

Get the style sheet alterations you made to work by changing the above code as follows:

<div id="trackback-uri" class="meta">
<?php _e(”The URI to TrackBack this entry is:”);?> <em><?php trackback_url()?></em>
</div>

Now save your changes by clicking on the “Update File »” button, like you did with the style sheet, and check the test page you’ve left open in another tab or window to see if you’re happy with the results. Look good to you? Congratulations, you’re done!

Didn’t work? Have questions? Leave a comment, and I’ll see what I can do.