CSS-Tricks

New Screencast: Current Nav Highlighting - Using PHP to Set the Body ID

*   September 18th, 2008   *

by: Chris Coyier

One of the more efficient ways to handle current navigation highlighting is to give each of your navigation items a unique class name. Then give each page a unique ID on the body element. Then CSS can control what each navigation item looks like based on that body ID. But what if you are using a CMS like WordPress which includes that body tag as part of a template? In this case, we can use PHP to look at the URI of the page and create the ID based on that. Nifty trick!

Long story short?

	...
</head>

<?php
	$page = $_SERVER['REQUEST_URI'];
	$page = str_replace("/","",$page);
	$page = str_replace(".php","",$page);
	$page = str_replace("?s=","",$page);
	$page = $page ? $page : 'default'
?>

<body id="<?php echo $page ?>">

Bookmark at Delicious Digg this! Stumble this! Submit to DesignFloat Submit to DZone

Responses


  1. Gravatar

    Jordan Payne
    September 18, 2008
    [ permalink ]

    Nice Chris!

    This is a neat little way to achieve such a goal. I remember reading about something similar to this once. Good explanation of it.

    jordan

  2. Gravatar

    David Walsh
    September 18, 2008
    [ permalink ]

    A bit shorter on the PHP side:

    $page = str_replace(array(’/',’.php’,'?s=’),”,$_SERVER['REQUEST_URI']);

    $page = $page ? $page : ‘default’;

  3. Gravatar

    camilo vitorino
    September 18, 2008
    [ permalink ]

    nice. i alread use this sistem and it is VEEEEEEEERY useful

  4. Gravatar

    ThinkSoJoE
    September 18, 2008
    [ permalink ]

    Good tutorial, Chris! If you’re doing this sort of thing in WordPress you can use some of WP’s built in functionality to achieve the same thing, which I had written a tutorial about on my site. I’m working on my own backend for future projects, so this tutorial will come in handy down the line. Thanks!

  5. Gravatar

    Mason Sklut
    September 18, 2008
    [ permalink ]

    Great tip! I was looking for this….

  6. Gravatar

    Ariyo
    September 18, 2008
    [ permalink ]

    Good stuff. PHP always win!

  7. Gravatar

    carlnunes
    September 19, 2008
    [ permalink ]

    My last name, Nunes, is pronounced “new-ness”.

    Thanks for the props Chris! ;-)

  8. Gravatar

    Chris Coyier
    September 19, 2008
    [ permalink ]

    Sorry for the mispronunciation Carl!

  9. Gravatar

    Nicolaj Kirkgaard Nielsen
    September 20, 2008
    [ permalink ]

    I really like the idea of using the body ID tag to identify pages, I’m definitely stealing that one for future projects :p

    The code doesn’t seem to work on the comments links, like this one: http://chriscoyier.net/my-favorite-tv-shows-of-all-time/#comments

    Would be nice to modify the code so it just extracts the “whatever’s-in-between-the-first-pair-of-slashes” that go right after the domain name. That way something like http//www.site.com/archive/2007/july would just return “archive”.

  10. Gravatar

    Moe
    September 21, 2008
    [ permalink ]

    how i can use this in Smarty TPL

  11. Gravatar

    Daniel K
    September 21, 2008
    [ permalink ]

    I like it. I think I’d tweak it though so that it became a body class instead of the id. That way if you tag your site by id (i.e. id=”webtech-tstc-edu” or id=”css-zen-garden”) it would reach people who have created stylesheets for that website.

  12. Gravatar

    atom
    September 22, 2008
    [ permalink ]

    If a person puts this on their server and they do not have url encoding on by default they will be introducing an xss vulnerability. User input of any kind should be cleaned in some fashion, this includes server variables which pull information from the URI.

  13. Gravatar

    Nicolaj Kirkgaard Nielsen
    September 22, 2008
    [ permalink ]

    Interesting, Atom… How does one go about fixing that issue? Is something like htmlspecialchars() enough?

  14. Gravatar

    christopher
    September 24, 2008
    [ permalink ]

    @Nicolaj — I like this idea. then your highlighted tabs will work if you have subpages, as long as you use a consistent permalink format.

    How could you alter the php to do this?

  15. Gravatar

    Joseph Faura
    September 24, 2008
    [ permalink ]

    This is exactly what I was looking for. However, when implementing on my site, which doesn’t use wordpress (or it does, but not on the root directory) the body id always defaults to “Header” which means it’s looking for the URI of the header.php in my root folder, not the actual page which “includes” the header.php in the code.

    Does this mean that this php code only work within Wordpress? You say it doesn’t, so I don’t know where I’m making my mistake. Any help would be really appreciated.

  16. Gravatar

    Joseph Faura
    September 24, 2008
    [ permalink ]

    Okay, I figured out that my problem was in my “include” functions. i had them set to an absolute URL, instead of a filepath. (i.e.
    <?php include('http://mavienrose.com/header.php');?>
    instead of: <?php include('header.php');?>

    However, because I have my wordpress directory, (let’s say “blog/”) linked to the header.php in my root directory, using filepaths would mess up how the server reads subdirectories (i.e. server would look for “blog/header.php” instead of “header.php” from the root directory.)

    Nicolaj and Christopher from the previous posts seem to be touching on an interesting point about allowing the “include” function to use URLs and have the page ID function work as well.

    I’m fairly new to PHP so if anyone could elaborate on this. I think it would really help in figuring out a solution.


Leave a Comment

Gravatar

Your Name
December 3, 2008