#36: Current Nav Highlighting: Using PHP to Set the Body ID

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!

Comments

  1. User Avatar
    Granulr
    Permalink to comment#

    This is really nice – although it doesn't work with sub-pages.

    How can I get this to highlight the main navigation when on a sub page?

    Also any ideas to get this to highlight sidebar navigation?

  2. User Avatar
    Damon
    Permalink to comment#

    Chris-

    Thanks for this tutorial. Thought of this idea before, but just didn't know exactly how to implement it. I have one question. I am developing locally using MAMP, and when I use this trick it leaves my base website directory in with the body id because the root is http://localhost:8888 (ex. http://localhost:8888/mybasedomain/contact_us/ind…leaves mybasedomaincontact_us as the id – I changed the ".php" in your tutorial to "index.php" for my application). Is easy way to fix this for development without having to change my css or add the website root directory as part of the str_replace? Thanks.

  3. User Avatar
    Damon
    Permalink to comment#

    I found a solution for the subdirectory issue mentioned by Granulr above. Here's what I did inside my header include file (hopefully all my code posts)…

    I also had a variation of the tutorial above where I eliminated the switch statement and just echoed $title for the page title. By the way, this site is set up with index page in each directory/subdirectory for each section of the site.

    This may not be the best way, or may be flawed, but it seems to be working for me so far.

    <?php

    // Get a portion of the URL (string), explode the string into an array using the "/" to separate, and find the value for the second to last array key.
    // Pass this value into the switch statement to produce a custom page title for each different pages in the site.
    // This page title added to the site base name to complete the title.

    $page = $_SERVER['REQUEST_URI'];
    $arr = explode('/', $page, 10);
    $title = $arr[count($arr) – 2];
    $title = str_replace('_', '', $title);

    function getTitle() {

    global $title;

    switch ($title) {

    case 'clients':
    echo " – Client List";
    break;

    case 'portfolio':
    echo " – Portfolio";
    break;

    case 'aboutus':
    echo " – About Us";
    break;

    case 'contactus':
    echo " – Contact Us";
    break;

    case 'services':
    echo " – Our Services";
    break;

    default:
    echo '';

    }
    }
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Main Site Title<?php getTitle(); ?></title>
    <script type="text/javascript" src="../scripts/jquery-1.2.6.pack.js"></script>
    <script type="text/javascript" src="../scripts/jquery.js"></script>
    <link type="text/css" rel="stylesheet" href="../css/main.css" />
    </head>

    <body id="<?php echo $title; ?>">

  4. User Avatar
    michael soriano
    Permalink to comment#

    that's what i did. I develop using xampp lite and the code concatenates the "mybaseddomain" in front of the "contact_us" for the body id. For now I just added an extra str_replace for "mybaseddomain" until chris responds.

  5. User Avatar
    Andrew Puig
    Permalink to comment#

    Ive been searching for an article like this for a while, thanks alot chris really helpful.

  6. User Avatar
    Anthuan Vasquez

    Other simplest way is to use the slug of the pages with this Function to wodpress:

    
    function the_slug() {
    $post_data = get_post($post->ID, ARRAY_A);
    $slug = $post_data['post_name'];
    return $slug; }
    

    so you get the slug of the page. For the home you just have to condition it.

    
    <body id="<?php if ( !is_home() ) { echo the_slug(); } else { echo "home"; } ?>" >
  7. User Avatar
    Novica89
    Permalink to comment#

    Why not just use jQuery for applying a class to when it’s clicked , which is stylized in CSS up front?
    IE:
    $(‘ul li’).click(function () {
    $(this).addClass(className);
    });

  8. User Avatar
    Sofie
    Permalink to comment#

    Thanks a lot for this, works as a charm!

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag