Help with CSS integration into wordpress

[ArchDesignLabs]

Ok so I am trying to do something much like what chris has done herehttp://css-tricks.com/examples/MagicLine/ but I cant seem to figure out how to get it to work within wordpress. My navigation is part of my header.php document so the exact same thing cant be done as normally you would paste the html part into the nav of every page changing which one is active. How would you make wordpress know which page is active? Thanks for the help

[Kestral]

In the header you can have JavaScript parse the URL and determine what page their on, I’ve done this before (not in WordPress) with jQuery:

Code:

var loc = $("span#spc-loc").text();
var loc = loc.replace("/im/", "./").replace("/IM/", "./");
$("span#spc-loc").text(loc);

// To make it so the icons for each page shows correctly with the ? data this needs to be done. Forget switch()
// It won’t work here

$("#spc-loc:contains(‘index.php’)")
.parent()
.find(‘.home + .ico’)
.addClass(‘current’);
$("#spc-loc:contains(‘news.php’)")
.parent()
.find(‘.news + .ico’)
.addClass(‘current’);
$("#spc-loc:contains(‘about.php’)")
.parent()
.find(‘.about + .ico’)
.addClass(‘current’);
$("#spc-loc:contains(‘works.php’)")
.parent()
.find(‘.works + .ico’)
.addClass(‘current’);
$("#spc-loc:contains(‘/forum/’)")
.parent()
.find(‘.comm + .ico’)
.addClass(‘current’);

Where .spc-loc was:

Code:

<span id="spc-loc"><?php echo $path; ?></span>

Where $path was:

Code:

$path = $_SERVER[‘REQUEST_URI’]; 

[ArchDesignLabs]

Ok, I dont have much jquery experience at all but I could give this a go. If there are any other ways please let me know and thanks for the help thus far!

[Kestral]

"ArchDesignLabs" wrote:

Ok, I dont have much jquery experience at all but I could give this a go. If there are any other ways please let me know and thanks for the help thus far!

This all can be done with pure JavaScript, however, without the jQuery it can get confusing and more complex than what it should be.

Code:

$("#spc-loc:contains(‘index.php’)")

Is more flexible than:

Code:

var text = document.getElementById(‘spc-loc’).innerHTML;
if(text == "index.php") {
... do stuff ...
}

And is really self explanatory. Elements with (Not an if statement, per se) #spc-loc that contain ‘index.php,’ in the parent find .ico who immediately follows .home and add the class ‘current.’

I recommend go through jQuery’s documentation if you wish to learn jQuery; and of course, Chris’ articles are a big help, too.

[Author]

Posts