How to load whole Wordpress pages dynamically with AJAX/jQuery like this following website?

Question

This website: http://www.ericpaulsnowden.com

(The website is done in Wordpress).

Loads pages and posts dynamically with AJAX/jQuery.

Does anybody know how to do this?

Answer 1

I do, it's my site :) Here it is at a high level

1) I built the site as a standard html/css/javascript site without ajax and without Wordpress code. Layout complete without content. All links are regular a href links - this helps with backwards compatibility later.

2) Added in the Wordpress code to pull in content without ajax. Make sure all content is wrapped in a consistent div, which I call container.

3) I use jQuery to hijack all clicks on a href links. If there isn't target="_blank" or a class of override I then load the page using ajax. I grab the url, look for the div of container (defined above) and load just that content keeping the header and footer consistent. I also use JQuery address to change the url and title of the page.

4) When the content is finished loading I fire jQuery calls to fade in the content and reposition the bar under the nav. I also make additional calls to add any page specific JS back in as it gets stripped out by loading the page via ajax.

5) Finally I modified my .htaccess file to add a www. to every page and added javascript into the header of my file to add the hash into the url more jQuery address code to load the proper page if someone deep links.

Hope some of this helps!

Eric