SPLOTpoint: Now With Arrow Key Navigation

It’s good to have short cuts.

I’m a mad spree of code update for my pile of WordPress themes I plan to use in my workshops down under. One thing I noticed in my own dog-fooding with the SPLOTpoint I built as a presentation platform.

The navigation between “slides” is way down at the bottom:

Navigating between slides is always a scroll and click…

If you wanted mainly to flip between the featured images that fill the top, like “slides”, well, awkward.

I wondered how simple it would be to add some navigation via arrow keys. My search on wordpress arrow key navigation brought a number of possibilities. Maybe a plugin? But I have my “slides” organized in order based on a custom integer value. There’s got to be a code way.

The answer was just a few results down the page, How to add Keyboard Navigation to your WordPress powered website.

It was even easier because my theme already generates the footer navigation buttons, no need to add them as hidden divs. Mine is done in a function, and the class names are different, but that was no problem:

	function splotpoint_post_nav() {
		// Don't print empty markup if there's nowhere to navigate.
		$previous = ( is_attachment() ) ? get_post( get_post()->post_parent ) : get_adjacent_post( false, '', true );
		$next     = get_adjacent_post( false, '', false );

		if ( ! $next && ! $previous ) {
			return;
		}
		?>
		
			
			
				%link
', _x( '←', 'Previous post link', 'intergalactic' ) );
					next_post_link(     '%link
',     _x( '→', 'Next post link',     'intergalactic' ) );
				?>

I don't like the techglimpse approach of putting the jQuery in the ppst template, you gotta enqueue stuff yo do it right. I already had code to enqueue another library, so it was a matter of putting the jquery in its own file jquery.splotpoint.js, and rigging up the function to bring it in:

function splotpoint_scripts() { // custom jquery down in the footer you go wp_register_script( 'splotpoint-backstretch' , get_stylesheet_directory_uri() . '/js/jquery.backstretch.min.js', array( 'jquery' )); wp_enqueue_script( 'splotpoint-backstretch' ); // custom splotpoint jquery wp_register_script( 'splotpoint' , get_stylesheet_directory_uri() . '/js/jquery.splotpoint.js', array( 'jquery' )); wp_enqueue_script( 'splotpoint' ); } add_action( 'wp_enqueue_scripts', 'splotpoint_scripts' );

Then I decided to get fancier. How about using the up arrow key to navigate to the "home"? Digging into the web inspector, the link for the home of the site fits perfectly:

So the home link could be referenced via jquery as .site-title a. Just needed to look up the key code for up arrow, and change the jQuery code to use a switch statement rather than if-then, this is working now:

jQuery(document).ready(function () { jQuery(document).keydown(function(e) { var url = false; switch(e.which) { case 37: // Left arrow key code - go prev url = jQuery('.nav-previous a').attr('href'); break; case 38: // up arrow key code - go home url = jQuery('.site-title a').attr('href'); break; case 39: // right arrow key code - go next url = jQuery('.nav-next a').attr('href'); break; } if (url) { window.location = url; } }); });

This works because my function for generating the navigation links puts them there only if there is a slide to navigate to.

Try it out! Follow this dude to the first slide in a recent demo. Right arrow key will take you to next slide, and once at the second slide, the left arrow key will send you back... and up arrow to the front index.

Sweet! I think writing this blog post took longer than getting the code to work.

No need to stand there just looking around at each other when you can nab this nifty SPLOT now.

Comments