I am presently moving my HTML website right into a WordPress Theme and also have the following question:

My current HTML website makes optimum use of jQuery's .load() function, by where I alter the content from the page (using a DIV), using .load() according to my side menu options selected through the user.

For instance:

Web Coding:

<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 by using this being an HTML situation, the consumer clicks the "About Us" menu option, which may essentially consequently load the "about-us.html" file with different href tag for around Us.

Now within the WordPress world, I've produced a custom page template for around Us known as "about-us.php" that's associated with a Wordpress Admin dashboard page known as "aboutus" (permalink), so my a href value is "url/aboutus/"

According to this, how do i attain the same lead to WordPress to emulate my Code using jQuery .load?

Please remember that I've added all of the necessary info during my header.php, index.php and sidebar.php files.

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

Hope someone can help as I am much less sure how to overcome this from the WordPress perspective.

Thanks.

To begin with I'd start making the website completely functional With no javascript loading. This'll get the navigation and layout proper before getting fancy as well as give a fallback for spiders as well as for whenever your JS breaks.

Next, create a subset of templates, or modify your overall templates, to respond to a GET var within the Hyperlink to exclude everything however the primary content part of the template. For that Ajax load you will not need such things as the header, feet and sidebar.

Then I'd use jQuery to seize navigation links click occasions, customize the request URI to place a GET var in, and then suggest the request using .load().

A side advantage of this is where you switch on caching (yes, you need to run your website with caching, its wordpress, its not even close to "light") your Ajax asked for pages may also be cached for tight load occasions and fewer resource usage.

I suppose since you have done it before you know how to deal with the jQuery action binding, request and response parsing.