Question

I’m trying get the code below to always highlight the current page of a theme that I’m working on but it does nothing. The HTML part is as shown below the script. Any suggestions or solution for the fix.

<script type="text/javascript">
    var url = window.location.href;
    url = url.substr(url.lastIndexOf("/") + 1);
    $("#navbar").find("a[href='" + url + "']").addClass("current");
</script>

<div id="navbar">
    <ul>
        <li><a href="index.php">home</a></li>
        <li><a href="services/">services</a></li>
        <li><a href="procedure/">procedure</a></li>
        <li><a href="about-us/">about</a></li>
        <li><a href="contact-us/">contact</a></li>
    </ul>
</div>

Answer 1

You need to look into WP Nav Menu.

I’m guessing this is a theme you’re developing? If so, Register a Nav Menu in your functions.php file. What this will do is allow you to define your menu in the WordPress dashboard (Appearance->Menus), and customize it however you like.

The reason why I’m suggesting this is that not only will it allow you to have total control over your Menu in a very intuitive way, but it also defines all the classes you could possibly need for your stylesheet automatically (including current items, and ancestry).

That is the cleanest option you have at your disposal. You can also look into WP List Pages for a similar (albeit, more limited) solution.

Otherwise, you’ll have to do something dirty like this:

<?php
$id = get_the_ID();
$class = ' class="current"';
?>
<ul>
    <li<?php echo is_home() ? $class : ''; ?>><a href="<?php echo home_url(); ?>">home</a></li>
    <li<?php echo $id==$serives_ID ? $class : ''; ?>><a href="<?php echo get_permalink($serives_ID); ?>">services</a></li>
    <li<?php echo $id==$procedure_ID ? $class : ''; ?>><a href="<?php echo get_permalink($procedure_ID ); ?>">procedure</a></li>
    <li<?php echo $id==$about_ID ? $class : ''; ?>><a href="<?php echo get_permalink($about_ID); ?>">about</a></li>
    <li<?php echo $id==$contact_ID ? $class : ''; ?>><a href="<?php echo get_permalink($contact_ID); ?>">contact</a></li>
</ul>

Replace $services_ID, $procedure_ID, etc. with their respective Page IDs, and if the current ID matches any one of them, that item will have a class of “current” applied to it, which you can then target in your stylesheet.

The main reason why I suggest a server-side solution over using any kind of jQuery is that this is not a task that is suited specifically for jQuery itself.

While the jQuery library is a powerful tool, WordPress has all of the built-in functionality you need to detect everything you want to detect in this instance. Let the server do as much work as possible before letting the client’s browser take over. Otherwise, you’ll be looking at some serious load times.

UPDATE:
Based on your last comment, if you’re going to go with the messy way and you don’t want to be bothered with finding IDs of your pages, you can also do this:

<?php
$slugs = array('services', 'procedure', 'about-us', 'contact-us');
?>
<ul>
    <li<?php echo is_home() ? ' class="current"' : ''; ?>><a href="<?php echo home_url(); ?>">home</a></li>
    <?php
    foreach($slugs as $slug)
    {
        $page = get_page_by_path($slug);
        $class = is_page($slug) ? ' class="current"' : '';
        echo '<li'.$class.'><a href="'.get_permalink($page->ID).'">'.str_replace('-us','',$slug).'</a></li>';
    }
    ?>
</ul>

UPDATE BASED ON LAST COMMENT:

Now that you’re using wp_nav_menu, you can target the current menu item with CSS. Here’s an example that will turn the background of the current item to red:

<style type="text/css">
.current-menu-item{background:#F00;}
</style>

Apply these rules either in your header, or preferably in your main style.css file. Good luck!