jQuery’s .load() Function and WordPress

Question

Hi,

I'm currently migrating my HTML website into a WordPress Theme and have the following question:

My current HTML website makes full use of jQuery's .load() function, by where I change the content of the page (via a DIV), using .load() based on my side menu options selected by the user.

For example:

HTML Code:

<div id="sidebar">
        <ul id="themenu" class="sf-menu sf-vertical">
            <li><a href="index.html" class="topm currentMenu nosub">Home</a></li>
            <li><a href="about-us.html" class="topm nosub">About Us</a></li>
       </ul>
</div>

jQuery Code:

$("#themenu li a, #subcat li a").click(function(){
        var toLoadCF = $(this).attr("href")+" #contentfooter";

        $('#contentfooter').fadeIn("slow",loadContent); 

        function loadContent() {
            $("#contentfooter").load(toLoadCF);
        }
        return false;
    });

So using this as an HTML situation, the user clicks on the "About Us" menu option, which would basically in turn load the "about-us.html" file based on a href tag for About Us.

Now in the WordPress world, I have created a custom page template for About Us called "about-us.php" that is linked to a WP Admin dashboard page called "aboutus" (permalink), so my a href value is "url/aboutus/"

Based on this, how can I achieve the same result in WordPress to emulate my HTML coding using jQuery .load?

Pls be aware that I have added all the necessary info in my header.php, index.php and sidebar.php files.

I'm just unsure how to reference the a href file, so that my about-us.php file is loaded using jQuery's .load()

Hope someone can assist as I'm not too sure how to approach this from a WordPress perspective.

Thanks.

Answer 1

First off I'd go about making the site fully functional WITHOUT the javascript loading. This'll get your navigation and site layout proper before you get fancy and will also provide a fallback for crawlers and for when your JS breaks.

Next, make a subset of templates, or modify your existing templates, to react to a GET var in the URL to exclude everything but the main content area of the template. For the Ajax load you won't need things like the header, foot and sidebar.

Then I'd use jQuery to grab navigation links click events, modify the request URI to put a GET var in, and then make the request using .load().

A side benefit of this is when you turn on caching (yes, you want to run your site with caching, its wordpress, its far from "light") your Ajax requested pages will also be cached for tighter load times and less resource usage.

I assume since you've done it before that you know how to handle the jQuery action binding, request and response parsing.