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:

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:

I had that working in a few minutes.

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:

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.

You can get in on SPLOTpoint from https://github.com/cogdog/splotpoint. I’ve been adding instructions for updating existing sites plus info for using the new Instant SPLOT package mixes for creating new ones with a pre-populated site.

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


Featured Image: navigation (cc) flickr photo by marfis75 shared under a Creative Commons (BY) license

Profile Picture for Alan Levine aka CogDog
An early 90s builder of the web and blogging Alan Levine barks at CogDogBlog.com on web storytelling (#ds106 #4life), photography, bending WordPress, and serendipity in the infinite internet river. He thinks it's weird to write about himself in the third person.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *