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.

@Chris that was my html markup and for the purpose of illustration. That .active class shall be dynamically loaded, based on url. — GaryP, Jul 03 '13 at 23:11
ruedamanuel's answer works only in the parent li. So it's not yet fix. I want it to work with nested li's. So any pages under the blog section shall activate and add an active class to the parent li, that is the Blog (mysite.com/blog) url. — GaryP, Jul 04 '13 at 03:22
It's going to be a bit of a nightmare for you to do this in JavaScript given the relative `href`s. It really would make more sense to do this server-side. — David John Smith, Jul 04 '13 at 10:35
@DavidJohnSmith As I've mentioned above, I though of using php or javascript.If someone could hop in and help me to fix it server-side, then that would be helpful. — GaryP, Jul 04 '13 at 18:59
I've found a solution, from the wordpress codex site, the one that I've posted above. I've just substituted current-menu-item with my theme's active parent menu class name and it worked. — GaryP, Jul 05 '13 at 00:15
@GaryDapogi I don't want to be disparaging (I understand how hard this stuff can be when you're trying to get off the ground) but you really need to clarify this question. From what I can see on the 320press bootstrap theme demo there are classes already being added for `active-menu-item`, `current-menu-ancestor`, `current-menu-parent` etc. If you need to customise this functionality then you should re-ask your question more pointedly. Also consider asking on wordpress.stackexchange.com . — David John Smith, Jul 05 '13 at 00:36
@DavidJohnSmith - I'm new to wordpress development, I've just learned that function.php is the one adding the classes current-post-ancestor, current-menu-parent, current-post-parent. So now it's a bit more clearer to me what I'm looking for. First I need to find a way to find out the top-most parent of a link or a post. And when that top-most parent link is identified, another function will add a class name to that parent link. — GaryP, Jul 06 '13 at 20:42

score 1 · Answer 1 · answered Jul 03 '13 at 22:02

1

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

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

Hope it helps.

answered Jul 03 '13 at 22:02

ruedamanuel

1,930
1
22
23

nice! but I'd like to add the active class in blog and all url within the blog link. Like so, mysite.com/blog, mysite.com/blog/somepage2, mysite.com/blog/somepage2 – GaryP Jul 03 '13 at 23:22
@GaryDapogi Do you mean all URLs in your blog's domain? – tr33hous Jul 04 '13 at 04:25
@tr33hous Yes, the blog. mysite.com/blog/othermorepath. And not only the blog path, but all child path of mysite.com. For instance, mysite.com/about-us/somemorepath. Adding static pages from my wordpress admin and then adding it to the menu does not have an activated link function. – GaryP Jul 04 '13 at 05:53

score 0 · Answer 2 · answered Jul 05 '13 at 00:26

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.

enter image description here

Well, this only works if my nav menu has only 2nd level li. It does not work if I wanted to use it to target a single post. Say for instance, blog > cateogory > post. So I need further help to add an active class to the blog menu when browsing a single blog post. — GaryP, Jul 06 '13 at 09:09

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

2 Answers2