I've asked this question before with a different Question Title over at Stackoverflow.

At that time, I was not yet aware that a function of the theme is adding a class name called current-menu-item. But now I knew that already, and a function of the theme is adding an .active class name to it whenever it is active.

I am using WP-Bootstrap theme by 320Press, that uses the Bones Theme Framework.

Now, I also wanted to add an .active class name to a parent <li> link, whenever any of it's child <li> link or <a> link is active, or whenever a single post is active from any child <li> link (category or sub-category).

I've created a menu from the admin panel using the add menu widget. The menu's parent item is called BLOG, and it's child items are the categories of the BLOG. Basically, the Blog Menu is a child item of my TOP NAV BAR MENU. My TOP NAV BAR MENU, holds the Home, Blog, and Information Menu. Clicking the BLOG menu will trigger the drop down menu function of the theme and shows the available blog categories. I've setup my Permalink Settings to Custom Structure like this, http://mysite.com//blog/%postname%/

My main goal is, to add an .active class to the <li> (which is a child of my main nav link), whenever any child <li> or <a> link or single post is active, like so.

Add .active class when:

http://mysite.com/blog/ is acccessed

http://mysite.com/blog/category is accessed

http://mysite.com/blog/post is accessed

The function code from my installed theme

add_filter('nav_menu_css_class', 'add_active_class', 10, 2 );
function add_active_class($classes, $item) {
    if($item->menu_item_parent == 0 && in_array('current-menu-item', $classes)) {
            $classes[] = "active";
    return $classes;


I can't put this in my comment, so I did put it here:

$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); 

What this tries to do?


My theme uses the Bootstrap Walker Menu


I've found a code block and applied it to my function.php and it worked. It adds a class name of menu-parent-item to the parent of the current menu item.

    add_filter( 'wp_nav_menu_objects', 'add_menu_parent_class' );
function add_menu_parent_class( $items ) {

    $parents = array();
    foreach ( $items as $item ) {
        if ( $item->menu_item_parent && $item->menu_item_parent > 0 ) {
            $parents[] = $item->menu_item_parent;

    foreach ( $items as $item ) {
        if ( in_array( $item->ID, $parents ) ) {
            $item->classes[] = 'menu-parent-item'; 

    return $items;    

I can now further target the class name and add the .active class.

  • There should be a current_page_ancestor class. How is that different than what you want? – s_ha_dum Jul 6 '13 at 21:49
  • @s_ha_dum I've been inspecting the theme, and It's not adding that class. It only adds, current-category-ancestor and othermore. But there's no current_page_ancestor or current-page-ancestor – GaryP Jul 6 '13 at 22:10
  • Interesting... what is the code that generates the menu? wp_nav_menu? – s_ha_dum Jul 7 '13 at 0:57
  • @s_ha_dum I'm really new to wordpress theme dev, but upon checking some file, my theme uses bones theme framework and it's using it's bones_main_nav. I have jetpack installed and I saw wp_nav_menu in one of it's library files. – GaryP Jul 7 '13 at 1:15
  • I can only assume the theme or a plugin doing something to remove those classes. Look for filters on nav_menu_css_class But bones_nav_menu may not use a WordPress walker at all. I'm not sure. – s_ha_dum Jul 7 '13 at 2:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.