Single page site + pushState?

I did something similar to this on einsteinworld.com.

The way I did it was to use a function in functions.php to get and render the content, then I called the same function from single.php or via ajax depending on the scenario.

Like that you can either use the global $post for direct navigation to the page, or just pass-in the post id via ajax and query for $post. Don’t forget to wp_localize_script and add your function for use with ajax

Use History.pushState to push the post’s permalink when called via ajax.

Here’s the skeleton code

/* In $(document).ready... */

History.pushState(null, [next-page-title], [next-page-url]);

$().update_content({
  post_id   : [next-page-id]
});


/* js function */

$.fn.update_content = function(args){

  var data = {
    action  : 'my_function',// in functions.php
    post_id : args['post_id']
  };

  $.post( MyAjax.ajaxurl, data, function(response) {
    if( response != 0 ){
      // put the returned content in the DOM
    }else{
      // Do something else      
    }
  });
};

/* in functions.php */

function my_function(){
  if( isset( $_POST['post_id'] ) ){
    $post = get_post( $_POST['post_id'] );
    $ajax = true;
  }else{
    $ajax = false;
  }

  echo [html-to-display-the-post-content]

  // if this is ajax'd stop the output
  if( $ajax )
    die();
}

Update
The site referenced above is no longer live, but the answer still works 🙂