I am wondering how hard it might be to dynamically replace content inside a wordpress site by using JQuery. This is actually the article I am going from: http://css-tricks.com/6336-dynamic-page-replacing-content/

My fundamental idea ended up being to alter the elements known to within their javascript file towards the elements produced in wordpress automatically. What this means is altering page-wrap to wrapper, primary-content to primary-col, and guts to content.

I went right into a speed bump after i attempted changing 'guts' though. For whatever reason the page does not show this content any longer. Anyway, once i have that taken care of,

I believed it. I'll place the code into my wordpress site and hope all went well.

among the pages:

    <div id="wrapper">
              <div class="nav">
              <ul class="sf-menu">
                  <li><a href="index.html">Home</a></li>
                  <li><a href="about.html">About</a></li>
                  <li><a href="contact.html">Contact</a></li>
        <section id="main-col">
            <div id="content">

Javascript that's placed in to the header:

 * jQuery hashchange event - v1.2 - 2/11/2010
 * http://benalman.com/projects/jquery-hashchange-plugin/
 * Copyright (c) 2010 "Cowboy" Ben Alman
 * Dual licensed under the MIT and GPL licenses.
 * http://benalman.com/about/license/
(function($,i,b){var j,k=$.event.special,c="location",d="hashchange",l="href",f=$.browser,g=document.documentMode,h=f.msie&&(g===b||g<8),e="on"+d in i&&!h;function a(m){m=m||i[c][l];return m.replace(/^[^#]*#?(.*)$/,"$1")}$[d+"Delay"]=100;k[d]=$.extend(k[d],{setup:function(){if(e){return false}$(j.start)},teardown:function(){if(e){return false}$(j.stop)}});j=(function(){var m={},r,n,o,q;function p(){o=q=function(s){return s};if(h){n=$('<iframe src="javascript:0"/>').hide().insertAfter("body")[0].contentWindow;q=function(){return a(n.document[c][l])};o=function(u,s){if(u!==s){var t=n.document;t.open().close();t[c].hash="#"+u}};o(a())}}m.start=function(){if(r){return}var t=a();o||p();(function s(){var v=a(),u=q(t);if(v!==t){o(t=v,u);$(i).trigger(d)}else{if(u!==t){i[c][l]=i[c][l].replace(/#.*/,"")+"#"+u}}r=setTimeout(s,$[d+"Delay"])})()};m.stop=function(){if(!n){r&&clearTimeout(r);r=0}};return m})()})(jQuery,this);

$(function() {

    var newHash      = "",
        $mainContent = $("#main-col"),
        $pageWrap    = $("#wrapper"),
        baseHeight   = 0,

    baseHeight = $pageWrap.height() - $mainContent.height();

    $("sf-menu").delegate("a", "click", function() {
        window.location.hash = $(this).attr("href");
        return false;

    $(window).bind('hashchange', function(){

        newHash = window.location.hash.substring(1);

        if (newHash) {
                .fadeOut(200, function() {
                    $mainContent.hide().load(newHash + "#content", function() {
                        $mainContent.fadeIn(200, function() {
                                height: baseHeight + $mainContent.height() + "px"
                        $("sf-menu a").removeClass("current");
                        $("sf-menu a[href="+newHash+"]").addClass("current");




Change title to your css ID too.. That's the only real reason. For those who have transformed id in js as well as your php/html although not in css than defiantly it will not show any content.

So change #page-wrap to #wrapper and #primary-content to #primary-col and it is done.

So overall you have to modify 3 files