Highlighting the current page with PHP & jQuery ☆ kevinleary.net

Highlighting the current page with PHP & jQuery

Posted in CSS, PHP, User Interface, jQuery by kevin on September 10, 2008

Here is something every web designer / coder has to have come across at least once in their career. How do we highlight the current page in a navigation seamlessly and dynamically? The answer is PHP and jQuery.

My approach to this predicament is to use a combination of PHP, CSS, JavaScript and of course, jQuery.

XHTML

<ul id="navigation">
	<li><a href="about-us.php">about us</a></li>
	<li><a href="our-products.php">our products</a></li>
	<li><a href="blog.php">blog</a></li>
	<li><a href="login.php" class="active">login</a></li>
	<li><a href="contact.php" class="active">contact</a></li>
</ul>

The one downside to my approach is that because you use PHP within JavaScript, you must include the code interally into the <head> section of the document. External files simply won’t work in this case (at least to my knowledge, please correct me if I’m wrong).

JavaScript / jQuery

<script type="text/javascript">
$(function(){
	$('#navigation li a').each(function(){
		if (this.href.indexOf('<?= current_page() . '.php'; ?>') != -1) {
			$(this).parent().addClass('current');
		}
	});
});
</script>

PHP

function current_page() {
	if(basename($_SERVER['PHP_SELF'], '.php') !== 'index') { 
		return basename($_SERVER['PHP_SELF'], '.php'); 
	} else {
		return 'index';
	}
}

Usage

To use this you must of course load the jQuery JavaScript library before including the JavaScript / PHP code. You must also make sure that current_page() PHP function is written somewhere above the JavaScript.

How it works

What we do here is simple, we grab the current name of the page, for example home.php. Then we check out #navigation <ul> to see if any of the anchors contain an href attribute of that value. If any of the links are a match we flag the parent of the anchor with a CSS class. In this case I’ve chosen current to keep things self explanatory.

Example

So if we were on the about-us.php page our code would be presented like this:

XHTML

<ul id="navigation">
	<li class="current"><a href="about-us.php">about us</a></li>
	<li><a href="our-products.php">our products</a></li>
	<li><a href="blog.php">blog</a></li>
	<li><a href="login.php" class="active">login</a></li>
	<li><a href="contact.php" class="active">contact</a></li>
</ul>

Notes

In this case I chose to add the “current” class to the <li> rather than to the anchor. Usually I will create a navigation using CSS sprite techniques, and this allows me greater control over the presentation of that element. This can come in handy for rounded corners or tabs.

Resources

Christopher Seamon — September 12, 2008 at 10:40 am

Nice post Kevin. I have been leaning towards wanting to learn more about PHP (I am trying to learn more about back-end coding) and what I could do with it and stumbled upon your site.

I am a big time advocate of using Jquery and really like that you have a lot of information on it within your blog. Thanks for the good resources.

kevin — September 12, 2008 at 10:50 am

No problem. The first time I began working with PHP was inside Wordpress, and curiously led me to push my limits.

If your interested in going further with PHP in your work I’d recommend checking out PHP Solutions: Dynamic Web Design Made Easy. I’m a sucker for friends of ED books…

kevinleary.net