If you are reading this, please get modern browser.
skip to main content | skip to main navigation | skip to secondary content

Faux Active Link

~ 18th November 2004. · 19:10 CET · permanent link · printer friendly ~

Over there at The Man in Blue there’s nice tip about how to ‘hide’ link to a current page. Here’s server-side solution to improve your main navigation.

You should know some basics of PHP or ASP to follow examples below and also rename your files according to server-side technology used. Also, this is way too basic for advanced programmers, so don’t bother if you’re the one. I know i’m not : ).

Main Navigation

Main navigation is usually one unordered list, something like:

<ul id="mainNav">
    <li><a href="/">home</a></li>
    <li><a href="/about/">about</a></li>
    <li><a href="/products/">products</a></li>
    <li><a href="/services/">services</a></li>
    <li><a href="/contact/">contact</a></li>
</ul>

What we are aiming for is to replace <a> tag with something else, in this case it will be <span>.

Particular Pages

Open each page and place a string on the top of everything else and assign a value which will be descriptive, for example “homePage”, “aboutPage”, “productsPage”, “servicesPage” and “contactPage”. Something like:

<?php $pageName = "homePage"; ?>
... the rest of HTML/PHP here...

if you are using PHP, or 

<% pageName = "homePage" %>
... the rest of HTML/ASP here...

if you are using ASP. Repeat this for every page you want… Next, cut #mainNav unordered list, save it as include file and include it back in the same place of every page you’ve modified—PHP:

<?php include 'mainNav.php'; ?>

and ASP:

<!--include file="mainNav.asp" -->

The Magic

Here is an example of what mainNav.php should look like:

<ul id="mainNav">
    <li><?php if ($pageName == 'homePage') { echo '<span>home</span>'; } else { echo '<a href="/">home</a>'; } ?></li>
    <li><?php if ($pageName == 'aboutPage') { echo '<span>about</span>'; } else { echo '<a href="/about/">about</a>'; } ?></li>
    <li><?php if ($pageName == 'productsPage') { echo '<span>products</span>'; } else { echo '<a href="/products/">products</a>'; } ?></li>
    <li><?php if ($pageName == 'servicesPage') { echo '<span>services</span>'; } else { echo '<a href="/services/">services</a>'; } ?></li>
    <li><?php if ($pageName == 'contactPage') { echo '<span>contact</span>'; } else { echo '<a href="/contact/">contact</a>'; } ?></li>
</ul>

and here’s mainNav.asp:

<ul id="mainNav">
    <li><% If pageName = "homePage" Then Response.Write "<span>home</span>" Else Response.Write"<a href='/'>home</a>" End If %></li>
    <li><% If pageName = "aboutPage" Then Response.Write "<span>about</span>" Else Response.Write"<a href='about/'>about</a>" End If %></li>
    <li><% If pageName = "productsPage" Then Response.Write "<span>products</span>" Else Response.Write"<a href='products/'>products</a>" End If %></li>
    <li><% If pageName = "servicesPage" Then Response.Write "<span>services</span>" Else Response.Write"<a href='services/'>services</a>" End If %></li>
    <li><% If pageName = "contactPage" Then Response.Write "<span>contact</span>" Else Response.Write"<a href='contact/'>contact</a>" End If  %></li>
</ul>

Add/modify as desired, the styling is up to you…

Update: JavaScript Solution

If you don’t have an option to use server-side scripting, there is nice post with explanation and example: Clear Links to Current Page.

21 Comments

  1. Urm, haven’t you got the if statement the wrong way round. If it’s the page name you don’t want the link, else you do. You have it opposite way round.

    I use the if pagetitle to add id="active” to the LI to style the active page differently. I could also remove the link in the same way.

  2. Trovster, you’re right! It’s fixed now : )

  3. Even easier solution is just check for the page name if there are multiple pages used, e.g.:

    $basename=pathinfo($_SERVER["PHP_SELF"]);
    $basename=$basename["basename"];
    if ($basename=="book.php") //do something
    elseif ($basename=="index.php") // do something
    .
    .
    .

  4. Hi Marko, thanks for the useful tutorial.

    However, I have a small question about this. When I test this locally it works fine. When I upload it, the php gets included but somehow doesn’t see the $pageName variable, so I never get the active link.

    When I put this before the include:

    echo $pageName ;

    it nicely says: ‘homePage’. However the following menu include doesn’t ’see’ this. Any ideas??

  5. I don’t have an idea about this, but there is full working example and also a ZIP file, so you can check with it.

    Try to rename file extension of mainNav.php to mainNav.php.txt, and then include it. The only explanation apart from misspelling is that the file which should be included is executed before including.

  6. Renaming seems to do the trick. Many thanks!
    If only I understood why exactly this is happening…

    Oh well, it works so I’m happy.

    Thanks again.

  7. Here’s my oh-so-humble contribution. This is a bit more extensible, and much easier to manage.
    It uses the same concept as your example: set $pageName to the name of the current page, and include the mainNav.php file wherever you want it inserted.
    // mainNav.php
    /*
    Put this up at the top. It's a just simple array with the page name as the key, and the URL as the value.
    */
    $nav_links = array(
    "home" => "/",
    "products" => "/products/"
    );


    /*
    A simple foreach construct to cycle through each of the navigation links in the $nav_links array. It checks against the key to see if it's the current page, and prints out a span instead of an anchor if so.
    */
    print "<ul id="mainNav">";
    foreach( $nav_links as $link_text=>$link ){
    if( $link_text == $pageName ){
    print "<li><span>$link_text</span></li>";
    }
    else {
    print "<li><a href="$link">$link_text</a></li>";
    }
    }
    print "</ul>";

    Have Fun, and I hope this helps! ;)

  8. B.J., this is excellent, because one doesn’t have to set conditions for each page. Now, the script handles it all automatically. I’ve just added the <li>s in your example. Once again—great solution!

  9. Duh. Guess I should have double checked my code. Oh well. Anyway - I’m really digging your site (so many wonderful and thoughtful touches). Oh, and, um, if you ever need a PHP/MySQL developer…you’ve got my email *wink wink* (too bad I don’t live in Croatia)
    Peace out,
    B.J. Schaefer

  10. I tried to explain this awhile back but didnt do such a good job as this! Thanks.

    Here’s what I had to say:

    http://parrfolio.com/thoughts/index.php?p=19

  11. I tryed your technique with a header include that is inside my wordpress application. I can’t get the if/else statements to work. It just leaves it blank.

    Any ideas?

  12. This is a great solution and it avoids a query string which is what I most like about it, I used the exact same method when I first started making my new website a few months ago in PHP, before this post (still not live!).

    Spooky.

  13. Ryan,

    This is a bit tricky solution, but try something like following code. You don’t have to name every page, just copy -> paste or include it it where your navigation should be. You should enable mod_rewrite (read WP manual for this). $_SERVER["REQUEST_URI"] returns something like /wp/archive/2005/, depending on page requested.

    <?php
    $nav_links = array(
    "home" => "/",
    "archive" => "/archive/"
    );
    $requestedPage = $_SERVER["REQUEST_URI"];
    echo '<ul id="mainNav">' . "\n";
    foreach ( $nav_links as $link_text => $link ) {
    if (strpos($requestedPage , $linkText) != false) {
    echo '<li><span>' . $link_text . '</span></li>' . "\n";
    } else {
    echo '<li><a href="' . $link. '">' . $link_text. '</a></li>' . "\n";
    }
    }
    echo '</ul>' . "\n";
    ?>

  14. Thanks marko. I still can’t get this to work. Works fine outside of WP but inside it does’nt.

    Here is what I’m trying to do:

    <div id= "<?php if ($pageName == 'rideshare') { echo 'ridesharetitle'; } else { echo 'hometitle'; } ?>">

    This is in my WP index.php page on the very top:

    <?php $pageName = "rideshare"; ?>
    <?php require('./wp-blog-header.php'); ?>
    <?php require_once('http://www.panictour.com/graphical/header.php'); ?>

    I’m doing image relplacements for titles for each page of my site. I have the corrispoding css id for each page in my css. I have a header.php include where this code is being called. I include this header inside my wp index.php page. This works outside of WP perfectly. * the “<>” have no pspaces of course.

    Thanks for you help on this.

    -ryan

  15. None of my code showed up! It did in the preview.

  16. Ryan,

    Regarding the code not showing up—use &#60; instead of <, otherwise it will be stripped. You don’t have to place any unnecessary spaces.

    If you place <?php $pageName = "rideshare"; ?>in your index.php, then all the subpages will have a ‘name’ “rideshare”, because all of them are actually this same index.php, but with a different query strings. To make you this clear, place somewhere inside the body following line <?php echo $pageName; ?>.

    Following example should solve the header problem. You don’t have to label page with $pageName:

    <div id="<?php if ($_SERVER["REQUEST_URI"] == '/rideshare/' /* or /rideshare.php or whatever URI for this page is... */) { echo 'ridesharetitle'; } else { echo 'hometitle'; } ?>">.

    (REQUEST_URI is the URI without http://domainname.com and starts with a slash.

  17. Works like a charm. Thanks for all your help. I appreciate it.

    Thanks,

    Ryan

  18. I have one more question if you have time. By the way I’m a beginner at php. :)

    This works with this url ….com/rideshare/:
    <?php if ($_SERVER["REQUEST_URI"] == '/rideshare/') { echo 'ridesharetitle'; } else { echo 'hometitle'; } ?>

    Within the /rideshare/ folder I have dynamic premalinks gernerated by WP.
    ex: ….com/rideshare/this-title/

    How can I get the code
    <?php if ($_SERVER["REQUEST_URI"] == '/rideshare/') { echo 'ridesharetitle'; } else { echo 'hometitle'; } ?>
    to include all the dynamic directories under the /rideshare/ directory? Hence, directories such as ….com/rideshare/this-title/ or ….com/rideshare/generated-title/ or ….com/rideshare/could-be-anything/

    Site in development is here:
    http://www.panictour.com/rideshare/

    Postscript:
    Have you ever released your “preview comment” code? I know hicks has his version but your seems alot nicer. I’d like to get ahold of yours if you don’t mind. By the way your site is very clean and professional. I like it!

    Thanks again for the help.

    -Ryan

  19. Ryan,

    Let’s stay on topic here. The logic for the last scenario is pretty much the same. You just need some function to split the string REQUEST_URI and place the substrings in an array. Something like:
    <?php
    list($directory, $subdirectory) = split('/', $_SERVER["REQUEST_URI"]);
    echo '<div class="' . $directory . ' id="' . $subdirectory . '">';
    ?>
    I have no time to test it, but it’s a good start for you to dive into it.

    Yes, the comment form preview script have been explained and there is also a full list of posts about coding.

  20. Just wanted to point out the Server Variables are always full of good information, like the REQUEST_URI.

    Nobody has talked about ASP since the beginning, maybe since it is so old school. Try using

    Request.ServerVariables("SCRIPT_NAME")

  21. Couldnt you do this just by re-defining the body tag?

    eg. you have these styles:

    li, li a {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #333333;
    font-size: 10px;
    text-decoration: none;
    }
    body.home li .home, body.about li a.about, body.products li a.products{
    color: #FF0000;
    text-decoration: underline;
    font-weight: bold;
    }

    the you change the body tag to any of the following <body class="about"> or <body class="home"> etc. etc.

    Then you list items / menu is as follows:
    <ul>
    <li><a href="index.php" class="home">home</a></li>
    <li><a href="about.php" class="about">about</a></li>
    <li><a href="products.php" class="products">products</a> ,&lt; &gt; </li>
    </ul>

    Just a crazy idea.. :)

    see also http://www.apple-source.co.uk/

Sorry, the comment form is closed at this time, but if you have anything to say, please send me a message.

* Please keep in mind that this is a personal web site and it does not reflect the position or opinion of my respective employers, organizations or partners.

Typetester – compare screen type Supported by Veer.

What is this?

A web log of Marko Dugonjić, web professional from Croatia. Topics covered:

Translate this site

German, Spanish, Italian, French or Japanese (via).

See you there!

Feel like buying a book?

Try with maratz.com aStore

Personal Network

.HR Community

Public profiles

mi3, QBN, Flickr, Last.fm, LinkedIn, Coolinarika, Croportal

Worth visiting

top of the page | skip to main content | skip to main navigation | skip to secondary content