Recently, a reader named Don asked about this theme’s accessibility (accesskey) jump menu located at the top of each page. Several people have commented that they like the way the jump menu “lights up” upon gaining focus. Whenever a user hovers their cursor over the region at the top of the page, all links in the jump menu change to a more visible color. Then, as the cursor moves over the various menu items, each jump link is further highlighted with an even brighter color and an underline. This progressive focusing is best seen in browsers that support the CSS :hover pseudo-class (e.g., Firefox, Opera, etc.), however the menu remains useful even in CSS-challenged browsers (e.g., Internet Explorer). In this article, I explain how the Perishable Press jump menu is built using Web standards via CSS and (X)HTML, and then provide the specific code required to emulate the jump menu as it appears here at Perishable Press.

Continue Reading

Welcome to the Perishable Press Redirection Lounge!

What?

We keep a very close eye on all 404 (resource not found) errors. Every time a legitimate 404 rears its ugly head, we take the necessary steps to solve the issue. In most cases, we use htaccess redirects to prevent 404 errors. Often, the missing resource remains available, but has been moved to another location. In this situation, we simply redirect visitors to the new location. Easy. However, there are also a relatively small number of 404 errors that are generated due to content that is no longer available. For example, temporary posts, test posts, and duplicate posts often result in 404 errors, even if they were only online for a very short time. So, rather than redirecting such requests to the home page or to the 404 page, we have created an exclusive Redirection Lounge at which roaming search engines, misguided robots, and wandering visitors may find information and reassurance.

Where?

This page is actually a post handcrafted especially for this very moment in time. The post is public, exists online, and is archived at Perishable Press. In other words, you are currently deep within the Perishable Press Archives. To escape such ancient realms, click here to return to the Perishable Press home page. Otherwise, click on some other link to fight your way out of the archive database. Otherwise, enjoy your stay here at the Perishable Press Redirection Lounge. It may not be exactly what you originally had in mind, but you have to admit, the solitude provides plenty of time to think about that interesting life of yours.

Why?

You are here because you tried accessing a resource at perishablepress.com that is no longer available. Please note that the content you are seeking has not been relocated, misplaced, or renamed — it is simply no longer available on this domain. Most likely, the content has been deleted permanently. If you are absolutely convinced that the content you are seeking is worth pursuing, please check out the Google index or the excellent Wayback Machine. Indeed, if the requested content were still available on this domain (perishablepress.com), our diligent web gimps would have redirected you swiftly to the new location of the resource. However, as the requested resource is not available, and because we try to avoid as many 404 errors as possible, we have created this Redirection Lounge to serve as our official redirect target for otherwise dead-end requests. We hope you find it as comfortable as it is informative.

Huh?

If you feel that you have arrived at the Redirection Lounge in error, or have information concerning the requested resource, please use our official contact form to drop us a line.

Use this simple code as a button that will return users to the previous page:

<form>
 <input type="button" value="Return to previous page" onClick="javascript:history.go(-1)" />
</form>

Here it is as a simple text link:

<p>
 <a href="javascript:history.go(-1)" title="Return to the previous page">&laquo; Go back</a>
</p>

You can make things easier by serving PHP and printing the link automatically. Here is the button link:

echo "<form><input type=\"button\" value=\"Return to previous page\" onClick=\"javascript:history.go(-1)\"></form>";

And here is the PHP code to print a "Go back" text link:

echo "<p><a href=\"javascript:history.go(-1)\" title=\"Return to previous page\">&laquo; Go back</a></p>";

Better yet, you can kick the accessibility factor up a notch by using PHP’s inherent HTTP_REFERER variable to write explicitly the previous URL, thereby eliminating the JavaScript requirement (thanks to Rick Beckman for the idea):

<?php $referer = $_SERVER['HTTP_REFERER'];
   if (!$referer == '') {
      echo '<p><a href="' . $referer . '" title="Return to the previous page">&laquo; Go back</a></p>';
   } else {
      echo '<p><a href="javascript:history.go(-1)" title="Return to the previous page">&laquo; Go back</a></p>';
   }
?>

The previous code will create an explicit "Go back" link when the referring URL is known. In those awkward situations where no referring URL has been recognized, the function writes a "Go back" link via JavaScript.

According to the WordPress Codex ¹, it is possible to pass quotation marks via the parameters of the function, wp_link_pages(). This would enable users to assign a particular css class or id to the function output, thereby providing greater design and behavioral control over that particular object.

But alas, as reported several times in the WordPress Codex ², wp_link_pages() is unable to pass quotes without causing errors.

To fix this, we open template-functions-post.php and find wp_link_pages(), which is located around line #121 (for WP 2.0.2).

The fix is easy, simply edit the <p> in the following lines:

$r['before'] = '<p>' . __('Pages:');

$r['after'] = '</p>';

For example, if you wanted to wrap the function output with a <div class="foo"> and subsequent </div>:

$r['before'] = '<div class="foo">' . __('Pages:');

$r['after'] = '</div>';

Upload and done. Do not forget to eliminate the before= and after= parameters when calling the function from the loop ³.

References

• ¹ WordPress Codex: About wp_link_pages
• ² WP Support Ticket: wp_link_pages: problem with arguments
• ³ WordPress Codex: The Loop

This article explains how to reverse the order of WordPress page navigation links.

To reverse the default (backward) order of page navigation in WordPress, open the file template-functions-links.php (in WP 2.0) or link-template.php (in WP 2.1/2.2) and scroll down to the last function, posts_nav_link() ¹. Next, find the last if statement and switch the order of the following two lines:

previous_posts_link($prelabel);
   [ ignore this line ]
next_posts_link($nxtlabel, $max_page);

Next, within the first line of the same function (beginning with function posts_nav_link), switch the order of the variables $prelabel='« Previous Page' and $nxtlabel='Next Page »'.

Finally, within the loop, make sure you are calling the function with the usual parameters in place. Something like:

<?php posts_nav_link(' | ','&laquo; Previous Entries','Next Entries &raquo;') ?>

That’s it! Your post navigation links (for index and category views) should now operate according to the following principle: left links point to older posts and right links post to newer posts.

References

• ¹ Not to be confused with previous_post_link() and next_post_link(), which provide navigational links to older individual posts and newer individual posts, respectively. Oddly enough, in the case of post-by-post navigation, WordPress gets it right: left links point to older posts and right links post to newer posts; however, this is not the case with page-by-page navigation, in which WordPress adopts the reverse strategy.

Improve accessibility by adding title attributes to your WordPress userspace.

Note: This article applies specifically to WordPress 2.0.2, but may be generalized to any WP 2.0+ version.

By default, WordPress navigation links omit the title attributes for both page and post views. Title attributes for links provide additional information that can improve the accessibility of your website. This is especially true when images or text symbols exclusively are used for navigation.

To add title attributes to WordPress page-view links (e.g., links for index, archive, and category views), open the file wp-includes/template-functions-links.php and find the functions previous_posts_link (line #494) and next_posts_link (line #459).

Within each function, replace the following line:

echo '">'. preg_replace('/&([^#])(?![a-z]{1,8};)/', '&#038;$1', $label) .'</a>';

..with this:

echo '" title="EDIT THIS">'. preg_replace('/&([^#])(?![a-z]{1,8};)/', '&#038;$1', $label) .'</a>';

Next, replace the EDIT THIS text in each function with “Previous Posts” and “Next Posts”. Keep in mind the reverse chronological order by which these links navigate. Remember to check a few page views and then you are done.

Now, to add the title attribute to navigation links within individual post views. Open the same file as above, wp-includes/template-functions-links.php and find the functions previous_post (line #336) and next_post (line #357).

Within each function, replace the following line:

$string = '<a href="'.get_permalink($post->ID).'">'.$next;

..with this:

$string = '<a href="'.get_permalink($post->ID).'" title="EDIT THIS">'.$next;

Next, replace the EDIT THIS text in each function with “Previous Post” and “Next Post” respectively. Remember to check a few post views and then you are done.