I'm building my site on localhost and I'd like to navigate to next and previous posts by using keyboard right and left arrow keys.

I know about the WP functions get_adjacent_post, get_next_post and get_previous_post, but since I'm new to this I don't know how to use them.

I found this code and placed it in the header of the site

<script type="text/javascript">
    document.onkeydown = function (e) {
        var e = e || event, 
        keycode = e.which || e.keyCode; 
        if (keycode == 37 || keycode == 33)
            location = "<?php echo get_permalink(get_previous_post()); ?>";
        if (keycode == 39 || keycode == 34)
            location = "<?php echo get_permalink(get_next_post()); ?>";
    }
</script>

the good thing is that by pressing the left/right arrows something happen, the bad thing is that the previous/next posts are not loaded, something like http://localhost/testsite/%3C?php%20echo%20get_permalink(get_next_post());%20?%3E is loaded instead.

How could this be fixed?

I'm building my site on localhost and I'd like to navigate to next and previous posts by using keyboard right and left arrow keys.

I know about the WP functions get_adjacent_post, get_next_post and get_previous_post, but since I'm new to this I don't know how to use them.

I found this code and placed it in the header of the site

<script type="text/javascript">
    document.onkeydown = function (e) {
        var e = e || event, 
        keycode = e.which || e.keyCode; 
        if (keycode == 37 || keycode == 33)
            location = "<?php echo get_permalink(get_previous_post()); ?>";
        if (keycode == 39 || keycode == 34)
            location = "<?php echo get_permalink(get_next_post()); ?>";
    }
</script>

the good thing is that by pressing the left/right arrows something happen, the bad thing is that the previous/next posts are not loaded, something like http://localhost/testsite/%3C?php%20echo%20get_permalink(get_next_post());%20?%3E is loaded instead.

How could this be fixed?

• posts
• javascript
• navigation

1 Answer 1

You're using get_next_post and get_previous_post correctly with get_permalink. The next and prev functions either return a WP_Post object or a falsy value. The permalink function accepts either a post object or a valid post ID and returns the post url as string, if it was found, otherwise it returns boolean false.

I tested the code you've posted by copy-pasting it to a theme's header file as the last thing before </head> and it worked as expected. Of course there's the silly reload behaviour you get, when there's no next or previous post causing the location to be empty. Maybe there's something else going on in your code that breaks the code?

Have you tried adding the code with an action hook? For example this works (on my local WP install).

function arrow_key_post_navigation() {

  $prev_post_url = get_permalink( get_previous_post() );
  $prev_post_url = $prev_post_url ? esc_url( $prev_post_url ) : '';

  $next_post_url = get_permalink( get_next_post() );
  $next_post_url = $next_post_url ? esc_url( $next_post_url ) : '';

  if ( ! $prev_post_url && ! $next_post_url ) {
    return;
  }
  ob_start();
  ?>
  <script type="text/javascript">
    document.onkeydown = function (e) {
      var e = e || event,
      keycode = e.which || e.keyCode,
      prevUrl = "<?php echo $prev_post_url ?>",
      nextUrl = "<?php echo $next_post_url ?>";
      if ( (keycode == 37 || keycode == 33) && prevUrl ) {
        location = prevUrl;
      }
      if ( (keycode == 39 || keycode == 34) && nextUrl ) {
        location = nextUrl;
      }
    }
  </script>
  <?php
  echo ob_get_clean();
}
add_action( 'wp_footer', 'arrow_key_post_navigation' );