If you’re already using css to highlight the ‘current page’ in your navigation but then decide that you want to include your navigation using a PHP Include, a problem becomes apparent:
How do I apply a page specific class to an individual navigation link?
Fortunately, PHP has a useful predefined variable called $_SERVER['PHP_SELF'] which returns the path of our current page. Using this in conjunction with the strpos function, we can apply a dynamic class to the current link.
PHP
1 2 3 | <?php if (strpos($_SERVER['PHP_SELF'], 'about.php')) echo 'class="current"'; ?> |
The function strpos() searches the path of our current page for the specified string, in our example, ‘about.php’. If it finds ‘about.php’, it writes ‘class=”current”‘ to the page. If it doesn’t find ‘about.php’, it returns FALSE and nothing gets written to the page.
Now, all we need to do is insert that code in to each navigation link inside our included file.
Included File
1 2 3 4 5 6 | <ul id="navigation"> <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'index.php')) echo 'class="current"';?> href="index.php">Home Page</a></li> <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'about.php')) echo 'class="current"';?> href="about.php">About Me</a></li> <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'contact.php')) echo 'class="current"';?> href="contact.php">Contact Me</a></li> <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'portfolio.php')) echo 'class="current"';?> href="portfolio.php">My Work</a></li> </ul> |
The result is the current page link being assigned a class of current which can then be styled with your css:
1 | .current {} |
Thanks for the great explanation!
Thanks a lot! It did exactly what I wanted.
Thanks so much for the tutorial!
Thanks a million for the tutorial, adding this to my site redesign.
You’re very welcome Nathan,
Glad it’s of some use
thanks for the wonderful tutorial.
how would i do this if each page resides
/home/index.php
/about/index.php
/contact/index.php
Hi dreadycarpenter,
In that case you could use the __FILE__ constant or $_SERVER['SCRIPT_FILENAME']
I am using switch to fetch html code for each specific page as follows:
<?phpswitch($ptr){
case 'home':include "public/home.html"; break;
case 'about':include "public/about.html";break;
The first part of code fetches the html and the second part of code dumps it between the div maincontent.
Is there a way to get the highlighting code to work on this layout.
Never mind you can use $_SERVER['REQUEST_URI'] to get the full path of the current page and use strpos to search for page specific string. In my case I just compared it to my case strings i.e. home, about et cetera et cetera.
Thanks for the great tutorial.
Glad to see you got it sorted snetts
Great post, thanks! One problem I’m having is that ‘class=”current”‘ is displaying at the top of my pages.
thanks again great site..
Guys, if I need to highlight two or more links, like: about.php, about_1.php, about_2.php, like sublink using the same page, what can I do?
Hi Daniel,
As this method is just using string comparisons, you would have to check for a common string segment in all links.
In the example you gave, this would mean checking for ‘about’, not an ideal solution. You might be better looking for a breadcrumb class that does this sort of thing automatically.
ElanMan,
Thanks for this tutorial. Simple and straight forward.
I’ve been trying for days to get a simple navigation like this to work, and nothing is working properly.
I’ve tried this tutorial and many others, word for word, and they all do the same thing. The links work perfectly on every page, but the “current” class never works.
The “current” class works fine without PHP, but once I put in the PHP code it no longer works. I’m a PHP noob, so I’m sure I’m doing something wrong. But, I’m also wondering if it’s something with my PHP setup on my host. Could that cause this problem?
Any help would be greatly appreciated.
The best explanation I saw untill now. Simple and straight to the point.
Thanks for this very good lesson!!!
Best regards,
Jorge
does anyone know…
if i wish the same navigation selection highlighted for more than one page, how would i code this?
an example would be an “About Us” in the navigation, when there are several related About Us pages and when a user is on any of them, keeping the About Us highlighted in the nav. file names might be: about.php, about-gm.php, about-md.php, etc.
thanks in advance for any help.
great and very useful article btw!
peace,
Aj
YOU LEGEND
This is just what I was looking for!
[...] en is wat omslachtig. ik kwam op volgende mogelijkheid… beide zijn ongeveer hetzelfde: deze en deze zou dit de beste manier zijn? nog nooit geprobeerd, maar het zou moeten [...]
Thank’s! Its perfekt! Easy and it works
Whoa!! thanks. Nice snippet. Saved me.
Excellent – a perfect simple solution! If you are using subfolders AND and include, then you must use $_SERVER[‘SCRIPT_FILENAME’ as __FILE__ seems to return the path of the include itself, not the file you want to highlight. Works perfectly, thank you!
Hi, i’m quite new to php and i was just wondering how to highlight the current page if my code looks like this
array("Home","inc/home.inc",true),
"Company_Profile" => array("Profile","inc/profile.inc",true),
"WhatWeDo" => array("What We Do","inc/whatwedo.inc",true),
"Careers" => array("Careers","inc/careers.inc",true),
"Contact_Us" => array("Contact Us","inc/contact.inc",true) );
function display_menu() {
global $menu_options;
echo "";
foreach ($menu_options as $key => $value)
{
if ($value[2])
echo "
".$value[0]."";
}
echo "";
}
?>
been tryin to figure this out to no avail. any help would be greatlyy appreciated. thanks!
I have the same question as AJ above:
does anyone know…
if i wish the same navigation selection highlighted for more than one page, how would i code this?
an example would be an “About Us” in the navigation, when there are several related About Us pages and when a user is on any of them, keeping the About Us highlighted in the nav. file names might be: about.php, about-gm.php, about-md.php, etc.
Hi Mark,
I suppose it depends on the structure of your site.
If all of the about* pages are in an ‘about’ directory, you could check for the directory in the url.
Failing that, you could have an array at the top of your included navigation containing all of the pages that apply:
And then check like this:
Great tool, very simple, but i’m not terribly familiar with php and was wondering if there’s a method to include an else statement? For instance: If this is the current page, use style a, otherwise use style b.
Right now this is working great for highlighting my active link, but I can’t seem to style all the non active links at the same time.
its better to use
instead of using strpos() function to find the page name
This solved a problem I’ve been banging my head against for three days! Thank you!
Thank you thank you thank you!!!
Many many thanks for the suggestion
The simplicity of this is wonderful! I understand the basics of PHP but I suck at the syntax. Which makes this trick super awesome. Question though:
I’m going to be implementing this alongside a javascript localscroll function that uses links and anchors; meaning I have a navigation whose pages all reside on one page and are differentiated by their anchors (#home, #about, etc). I’ve tried adding the #anchor to the specified string for each navigation link but it doesn’t seem to like that. Any thoughts?
Hi Sarah, the problem with what you’re trying to achieve is that the page isn’t being refreshed when the user clicks on one of the links. PHP therefore isn’t suitable. Javascript is the answer and as you’re already using it, just add another function to the click handler for each link which changes either the class name or the direct css property of the clicked link. If you’re using jquery, this should be relatively simple to do.
Hope that’s pointed you in the right direction
Hi ElanMan, thank you for this simple and brilliant solution!
Is there any way to modify it so the “current” tab/link in the menu is not linked?
i.e. I have tabs at the top of my page… your code helped me achieve the correct tab being selected when on a page. But it still links to the current page. I’d like the current one to have the <a href tag disabled. Thank you again!
Hi Chris, something like the following should do:
Sorry Chris, the ? rel=”nofollow” shite should just be the closing php tag…
My plugins are messing up
Hi ElanMan
Today i learnt something from your post. I am working on my first PHP site and have written simple code to display pages dynamically. Now that i would like to add current page indicator code to my current code structure, i am stuck. Hope to get the solution here.
Thanks for the great post. I am very new to PHP (its my 5th day learning PHP at the time of posting my query). i have picked up some understanding of PHP in these 5 days with the help of tutorials which have been published by generous and kind experts on the net.
My question is same as Snetts. Snetts has managed to resolve it (refer to number 10 above). He has described it nicely. Thanks Snetts.
Part of the code in my index.php goes like this:
Code in top_nav.php is as follows :
About Us
Products
Contact Us
Home
Your help is highly appreciated.
Hi Snetts, care to share the code which resolved the issue.
Best regards and thanks in advance.
hi, thanks for such a nice work just want to know as i am new in php when i tried this script it works fine but with that it also display class=”current” on the header need help to find solution
Hi ElanMan,
Thanks for a great tutorial.
I’m learning a lot about PHP and my dynamic site which I’m trying to build is really coming along now, thanks to your help amongst others.
Your code is functioning well as a side nav, unfortunately, like others I’m having a real problem trying to work out how to incorporate the correct code to get selected links to highlight in the active state.
I’ve been stuck on this one issue for a while now and no matter what code I try to put in, nothing seems to work.
Like one or two others, my navigation is based on a horizontal top menu, and a side menu for sub categories.
However, my links are dynamically linked from the index page. So they look like ‘index.php?category=about&page=about_content1…etc.’
It’s all working great….except for the fact that I can’t get these side menu links to highlight at all in the active state.
I’d really appreciate it if you could possibly help on this.
Thanks again for this tutorial.
I am a Php learner, and i have just started it, this is good example to set-up a current page highlighting automatically.
Thanks
Thomas
Thanks for the explanation, much simpler than the previous method I had toyed with.
hi…thanks for the tutorial but i cant seem to apply it to my code:
can you help? thanks