messages = array(); $this->fields = array( 'previous' => __("Previous [Left arrow]", 'keyboard-navigation'), 'next' => __("Next [Right arrow]", 'keyboard-navigation'), 'first' => __("First [Shift-Left arrow]", 'keyboard-navigation'), 'last' => __("Last [Shift-Right arrow]", 'keyboard-navigation'), ); if (isset($_POST['action'])) { if ($_POST['action'] == "update-fields") { $any_updated = false; foreach (array_keys($this->fields) as $field) { if (isset($_POST["selector-${field}"])) { update_option("keyboard-navigation-selector-${field}", $_POST["selector-${field}"]); $any_updated = true; } } update_option("keyboard-navigation-highlight-selected-elements", ($_POST['highlight-selected-elements'] ? "1" : "0")); if ($any_updated) { $this->messages[] = "Selectors updated."; } } } } function footer() { $plugin_url_root = pathfinding_get_admin_url() . '/' . pathfinding_get_plugin_path(); ?>
messages) > 0) { ?>
messages as $message) { ?>

fields as $field => $name) { ?>
" />
Highlight selected elements on theme? /> (overlay yellow boxes on selected theme elements, and show missing selector alerts in Firebug console or in alert dialogs)

Keyboard Navigation Version 0.2

Copyright © 2008 John Bintz | Released under the GNU GPL

Need some sane defaults for your theme? Click one of the links below to populate the selectors on the left:

Are you a theme author? Send your theme's navigation defaults to John Bintz and get them included!

How does this work?

Keyboard Navigation uses CSS3 Selectors to find the hyperlinks on the page that define the previous and next links on the page, and then uses JavaScript to assign the act of hitting the left and right arrow keys on the keyboard to clicking those links. This is exactly the same approach that you would use to style a specific element on the page:

Firebug display of a simple targeting procedure

Targeting the <a href="next-page"> on this page is quite easy — provide the CSS selector for the id of the element:

a#next-link

If the <a href> does not have an id, but does have a class, or is the only child of a particular element, you can use syntax like:

div.nav div#next-link-holder a

Keyboard Navigation extends this slightly so that, if the target element is not a <a href> tag, Keyboard Navigation will move up through the tree from the found element until an <a href> is found:

Firebug display of a more complicated targeting procedure

You have two approaches for identifying the <a href="next-page"> tag:

  • Using CSS3 selectors, you can use nth-child:
    div#menunav a:nth-child(2)
  • Using more familiar CSS syntax, target the <span class="next"> element, and Keyboard Navigation will move up through the DOM tree until it finds <a href="next-page">:
    div#menunav a span.next

Keyboard Navigation requires that the visitor have JavaScript enabled. This plugin uses the Prototype JavaScript library, and including it will increase the size of your total site download. Additionally, if other plugins load their own copies of the Prototype library, both plugins will break.