Question

I am looking for the best way to set a list item’s currentmenu class, in order 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.

The 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 its 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 occurring, which is where I want to determine the best means to solve my issue.

The 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.

Ho can I 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 proposing 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”.

Answer 1

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>