On some websites, regardless of whether or not they are wordpress or even PHP, the menu link for the page you are viewing gets highlighted or it becomes active. _An example could be the 2014 theme for WordPress (see how, in the nav bar at the top, the link for home is green?) _or css-tricks.com (link for the current page is orange.)

In static web pages, there could be more than one ways of doing this, and I’m not even gonna go there. But in dynamic websites, where there could be tons of pages with the same elements loaded, like the nav, the header, e.t.c. you can’t really change the attributes of a certain list item to suit a particular page.
Now the thing is, this isnt exactly rocket science.. Most good WordPress themes have this by default, but thanks to those few that don’t, I know that there’ll always be those who’d ditch a theme they spent ages styling on, simply because they’ll be tempted to use one that has it.

The day before I was modifying a theme, and I was almost completely done making it look like I wanted to, when I noticed that the css for :active state on the links didn’t apply. Of course that was stupid, no one really bothers with the active state anyway, they usually just define their own class.. After comparing the theme with another, and failing to find out how a general theme does it, I decided to code it in myself.

CSS-Tricks has this age old tutorial video  that shows a way to code it in yourself. Basically the idea is to parse the URL, and get the page request from the permalink. If you played the video, you can see how he got the page’s name and he applied it to the body as an id, and in his css he defined a style for body with ids matching the names of all his pages.

I however would do it slightly differently.. Just like he did, we get the request URL, get rid of slashes and question marsk (if any,) and apply it to a var ready to be echoed. But instead of applying and id to the body, and adding a comma separated “body#pagename” a number of times, we can define css for a particular class, like, for example “.current,” and add a script to the page, which gets the page’s name from the url, and finds the menu item with that name in it’s “title” attribute, and applies the “.current” class to it.

So all you gotta do is add the style for the .current _class to the css file and then add the php from that css-tricks tutorial (_the $page variable,)  to the header.php. And then you need to add a small Javascript script, that takes that $page var (don’t underestimate the power of <?php echo $page; ?>,) and applies the class to the corresponding menu link.

As a bonus, I will add below all the code you need to make this work.

<?php

$page = $_SERVER[‘REQUEST_URI’];
$page = str_replace(“?”,””,$page);
$page = str_replace(“/”,””,$page);
$page = str_replace(“.php”,””,$page);
$page = $page ? $page : “home”; ?>

Add this PHP at the very top of the header file.. before _everything, _and then, anywhere below below the nav markup, add this JS script:

You might have noticed that this only works if the container of the nav has a “.nav“ _class to it. Even if it doesn’t that can simply be added, and if there’s a different class name you are inclined to use, then simply use it, or if there’s an id, replace the “_getElementsByClassName” with_  “getElementById.” _But that wasn’t just it. Another prerequisite for it to work is for the _a _tags in the nav to have _title _attributes. So yeah maybe I’m just wasting my time posting this. But _hey! _Whatever works, works.