Wordpress: How to simply Ajaxify your theme, any theme, with jQuery

For one of my new projects I needed to re-develop a online radio website. The website would have a a radio player. Radio player would be Flash-based.

The problem with these type of project is that Radio players usually stop when navigating through pages. This is normal because when the page is loaded, everything, including the player gets re-loaded. I wanted to improve it. So I decided on doing a page load through Ajax, so that pages don't load, but only their content loads every time user switches pages. Other components would stay in its place. The content would only load in its own div.

I searched for a Ajax powered Wordpress theme in wordpress.org. (For security reasons, it is better to only use themes from wordpress.org and not from anywhere else.) But with no luck I stopped searching.

Then a brilliant idea came to my brain with a bright light above my head. With jQuery Ajax Library it is possible to loop through each and every URL in a page. So we could add javascript code to them and replace the default behavior of navigating to a URL with something we want.

$('a').click(function(event){
            event.preventDefault(); //this will stop from navigating to its href URL

            // do something...

            // load content with Ajax or something...

});

It is also possible to load a pages content through .load() function. With the load function we can even

So, it comes down to this:
1. we loop through all the a tags in the page
2. Stop their default behavior of opening an URL
3. We load the target url's content in a div

And as always I put my code in the footer.php of my Twenty Eleven theme. You can use anyother theme. But there are some things to modify. I'll indicate them later, don't worry.

The first code I written was this:

        $('a').click(function(event){
            event.preventDefault();
                      
            $( "#main" ).load( $(this).attr('href') + " #main" );
            
        });

The Twenty Eleven theme has its main content (without the sidebar etc.) in a div that has id "main". We can use load function to load only a specific part of a URL's content like this:

.load( "http://www.example.com #main" );

We have used this technique to load the #main div of the target page. This should be changed according to your theme.

It works, but only for the first time. After the content is loaded, the <a> tags in the newly loaded content does not work. It is maybe because the jQuery script had attached the Click event on the page, not the content load. So the newly loaded URLs need to be re-attached with the event.

So, I have modified the code like this:

<script type="text/javascript">
jQuery(document).ready(function($) {
    function bb() {
        $( "a" ).unbind();
        $( "a" ).bind( "click", function( ev ) {
                            ev.preventDefault();
                            $( "#main" ).load( $(this).attr('href') + " #main", bb );
                            return false;
        });
    }
    bb();

});
</script>

This code above binds the click event everytime the content gets loaded. It also unbinds all previous events assigned to it.

The code is highly experimental. I am still testing it. It may have some problems with <a> tags with javascript code. It also breaks on Dashboard links (such as post "edit" link). And who knows what. So use it in your own risk! But the reward of using this code is far better, right? With some simple lines of code you can Ajaxify your content.