single page wordpress

Question

I like wordpress as a CMS and I think it's got a lot there with it's vast plugin library however the front end, dare I say it is a bit out of date.

I don't like the system of old going page-to-page and would prefer a single-page site powered by JSON/AJAX. I've used wordpress to make simple client sites but when it comes to anything more impressive, the system of templates which wordpress has is a bit lacking.

I'm used to using Backbone.js and Knockout.js for frameworks and require.js for module loading. I'm looking for a plugin or source reference for effectively removing the wordpress front end and using CRUD/REST and Javascript to build single page dynamic sites.

Can anyone point me in the right direction?

Answer 1

There's nothing stopping you using AJAX for a singlepage website that loads in other pages dynamically rather than going to a whole new page. I would advise you build the site without the AJAX and then add AJAX on top so that everything degrades gracefully should an error occur or if javascript is turned off.

So assuming that you've now got a site that works almost as you intend but without the AJAX, you can easily jsut wrap all your content in IDs that jquery could pick up and request URLs on hyperlinks via js requests instead of letting the browser handle it.

That's tbe answer in its most crudest form.

You can adjust your templates too so that if the request was made by AJAX they only return the relevant content rather than a full blown templated page:

http://digwp.com/2011/02/ajax-requested-page-return-only-content/

Alternatively you can implement arbitrary AJAX callbacks, here's a list of articles on how to write use and extend the AJAX callbacks WordPress provides:

http://wp.smashingmagazine.com/2011/10/18/how-to-use-ajax-in-wordpress/

http://codex.wordpress.org/AJAX_in_Plugins

http://wpajax.com/

http://www.garyc40.com/2010/03/5-tips-for-using-ajax-in-wordpress/

http://w4dev.com/wp/wp_ajax/

http://codex.wordpress.org/Plugin_API/Action_Reference/wp_ajax_(action)

http://www.1stwebdesigner.com/css/implement-ajax-wordpress-themes/

http://www.emanueleferonato.com/2010/04/01/loading-wordpress-posts-with-ajax-and-jquery/