In wordpress, how to add an .active class to a parent nav link if any of it's child nav link is active?

Question

First of all, I am not a developer and I am just learning by myself. I don't have yet deep understanding of php and javascript.

I am developing my own WordPress site as a test subject and as my learning ground. I've used twitter bootstrap in my custom child theme, that has a parent theme called 320Press WP-Bootstrap. I have no problem in this area. Only in the php side of it.

I am now facing a problem regarding my top nav bar menu. I was not able to trigger fire the .active class for my desired menu item.

The menu is created 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%/

I've created an static page and set it as my Home Page, active class is working on that url, my root domain. The function.php of my theme is adding an .active class on it by targeting the current-menu item class. But when I navigate to my BLOG section (also a custom page), the active class is not added to the Nav Menu "Blog". The menu "Blog" was added via the admin Menu Widget.

One user suggested to tackle this issue server-side, so I assume he means adding some php codes.

But I don't have that skill yet. But wordpress provides codex, where I might just have to copy paste some code and tweak it. But in order to tweak it, I still need some php skill. Ive searched for some similar issues on the net and found some working solutions but I don't know how to implement it to fix my specific issue.

I've found some similar questions here:

jquery active class to menu item based on current url

Set active link based on URL

How to add class based on current url

but Im clueless on how to implement it.

I've also found this from the wordpress forum, I've substituted the values with my values but it's not working.

This is how my WordPress Nav Menu looks:

<div class="nav-collapse collapse">
    <ul class="nav">
        <li class="cateogry-1">Home</a></li>
        <li class="this-shall-become-active"><a data-toggle="dropdown" class="dropdown-toggle" title="blog">Blog<b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li class="category-1"><a href="../blog/cat1">Blog Category 1</a></li>
                <li class="category-2"><a href="../blog/cat2">Blog Category 2</a></li>
            </ul>
        </li>
        <li class="somelink1"><a href="#">Some Link 1</a></li>
        <li class="somelink2" ><a href="#">Some Link 2</a></li>
    </ul>                           
</div>

The main goal, to add an .active class to the Blog menu, 2nd <li> of ul#nav , when a user is browsing mysite.com/blog and all other pages below /blog path

UPDATE 1

I can't find any current_page_parent or current_page_ancestor to my navs.

UPDATE 2

Reading from the wordpress codex site, I've found this

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;    
 }

It adds class names to the parent <li> , I can now further target it and add the .active class name.

Now, I needed the code to add the .active class to the menu-parent-item.

Answer 1

You should be able to use location.pathname to manipulate the DOM on load ie

$(document).ready(function(){
   var currentLocation = location.pathname;
   if (currentLocation == "/test/1"){
      $("#page1").addClass("active");
   }
});

Hope it helps.

Answer 2

After intensive trial and error, and research. I've finally found a solution for my specific problem.

This solution worked in my case. I pasted the below code in my child theme's function.php

add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
function special_nav_class($classes, $item){
         if( in_array('current-menu-parent', $classes) ){
                         $classes[] = 'active ';
         }
         return $classes;
}

The above code was taken from this wordpress topic .

And I've modified it a bit to suit my needs.

Here is a screenshot of the working result.