Unable to set List Item Class in PHP for WordPress Site

Question

Hi,

Would really appreciate your help on people's recommendations on the best way to set a list item's currentmenu class, inorder to show the user the current active menu selected using php.

I have moved my html/css site over to WordPress but originally had all my code inside my index.html file that consisted of a sidemenu div and jQuery processing to toggle between active menu selections.

Code I originally has in my index.html is:

HTML Code for Sidebar Menu using Superfish:

    <div id="sidebar">
        <ul id="themenu" class="sf-menu sf-vertical">
            <li><a href="index.php" class="topm currentMenu nosub">Home</a></li>
            <li><a href="about-us.php" class="topm nosub">About Us</a></li>
       </ul>
</div>

jQuery Code for Toggling Current Active Menu:

$("ul.sf-menu li a").click(function() {
    $("ul.sf-menu li a").not(this).removeClass("currentMenu");
    $(this).toggleClass("currentMenu");
});

As this was all in the one index.html file, all worked fine.

Now with the move to WordPress and so moving my sidebar menu div into it's own sidebar.php file and in addition to this, having created individual custom wp page for about-us.php which calls in the sidebar.php file, I have the following issue occuring, which is where I need help in determing the best means to solve my issue.

Issue is, when the user first comes into the site, the index.php file fires and based on the above, the "Home" menu is currently the active menu based on default class value. But when the user presses the "About Us" menu option, which then calls my about-us.php page I created, that also calls the sidebar.php file, the current active menu is still the "Home" menu option, which is not correct.

Can people pls assist on how to make the "About Us" menu option now the active menu, i.e. have the class "CurrentMenu" now set for About Us" as I am not sure how to approach this in php as my jQuery toggling code no longer works?

I am propsing to have additional menu options with their own wordpress page templates calling the sidebar.php file and so will need to have those menu option set as class="currentMenu".

I am really hoping someone can assist with this from both a WordPress and non WordPress perspective.

Thanks

Answer 1

In order to add a specific class to the current page in your sidebar menu (or any menu), you'll want to read up on dynamic menu highlighting in the WordPress documentation. You could also try a plugin such as dTabs to make things easier on yourself.

Answer 2

Sounds like you are looking for wordpress conditional tags. For example:

<div id="sidebar">
    <ul id="themenu" class="sf-menu sf-vertical">
        <li><a href="index.php" class="topm <?php if (is_home()) { echo "currentMenu"; } ?> nosub">Home</a></li>
        <li><a href="about-us.php" class="topm <?php if (is_page('about-us')) { echo "currentMenu"; } ?> nosub">About Us</a></li>
   </ul>
</div>

The first nav line checks to see if the current page is the homepage, if so it prints the required tag for the menu. The second line checks to see if the page is the "about-us" page, where "about-us" is the post_name (slug). You could also use the post ID. For more examples/references of available relevant tags, check my link below. Hope this helps.

Reference: http://codex.wordpress.org/Conditional_Tags
Reference: http://codex.wordpress.org/Dynamic_Menu_Highlighting

To do this in standard PHP, avoiding using wordpress as platform, you could do something like this, or just assign a variable of the specific pages directly:

<?php
$path = $_SERVER['PHP_SELF'];    // get the path to the file
$page = basename($path);         // grab the filename
$page = basename($path, '.php'); // remove the .php extension
?>

<div id="sidebar">
    <ul id="themenu" class="sf-menu sf-vertical">
        <li><a href="index.php" class="topm <?php if ($page == "index") { echo "currentMenu"; } ?> nosub">Home</a></li>
        <li><a href="about-us.php" class="topm <?php if ($page == "about-us") { echo "currentMenu"; } ?> nosub">About Us</a></li>
   </ul>
</div>