dan@danixd.com
+44 7837 501 537
My name is Dan O’Connell. I am an Interaction Design graduate and web enthusiast who loves designing immersive, creative & user-friendly interactions.
I hope to one day conquer the world with an Arduino board, a windmill and a modem, but in the mean time, I’ll stick to front end web design + development.
Twitter @daninacan
LinkedIn /danixd
Delicious /daninacan
Facebook /danixd
Spotify /danixd
Since we have evolved from using static HTML pages, creating active links (not the less useful CSS :active pseudo selector) on included files can be a hassle. I have put together a function to make your life slightly easier.

I was forced to create this whilst developing a WordPress theme, when the links that required an active class didn’t work with WordPress’ built in conditional tags.
The principle is really simple. If the link’s destination matches the current URL in your browser’s address bar, the active class is assigned.
First of all you use a function to grab the URL in your address bar:
I found this on webcheatsheet.com.
<?php
function curPageURL() {
$pageURL = 'http';
if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
$pageURL .= "://";
if ($_SERVER["SERVER_PORT"] != "80") {
$pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
} else {
$pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
}
return $pageURL;
}
?>
The URL in your address bar is now stored in the function curPageURL().
Next comes the link comparison.
You can change the class to whatever you need, or return multiple classes etc.
<?php
function activeLink($pageID) {
if ( $pageID == curPageURL() ) {
echo 'class="active"';
}
}
?>
This creates the function you call in your HTML code.
This is what it should look like:
<a href="/the/link/location.html" <?php activelink("/the/link/location.html"); ?>>
The Link Name
</a>
In WordPress it is really simple to use too:
<a href="<?php the_permalink(); ?>" <?php activelink(get_permalink());?>> <?php the_title(); ?> </a>
In WordPress you can throw the two functions in your template’s function.php folder, with a standard page just save the two functions to a new php file and include it in your page’s header.
<?php include 'activelink.php' ?>