Databases
StackOverflow2013
Postsdbo
POIn wordpress, how to add an .active class to a parent nav link if any of it's child nav link is active?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIn wordpress, how to add an .active class to a parent nav link if any of it's child nav link is active?
    text
    copied!<p>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.</p> <p>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.</p> <p>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.</p> <p>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, <a href="http://mysite.com//blog/%postname%/" rel="nofollow noreferrer">http://mysite.com//blog/%postname%/</a></p> <p>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.</p> <p>One user suggested to tackle this issue server-side, so I assume he means adding some php codes.</p> <p>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.</p> <p>I've found some similar questions here:</p> <p><a href="https://stackoverflow.com/questions/10593591/jquery-active-class-to-menu-item-based-on-current-url">jquery active class to menu item based on current url</a></p> <p><a href="https://stackoverflow.com/questions/3494245/set-active-link-based-on-url">Set active link based on URL</a></p> <p><a href="https://stackoverflow.com/questions/17021501/how-to-add-class-based-on-current-url">How to add class based on current url</a></p> <p>but Im clueless on how to implement it.</p> <p>I've also found <a href="http://wordpress.org/support/topic/adding-active-class-to-active-menu-item" rel="nofollow noreferrer">this</a> from the wordpress forum, I've substituted the values with my values but it's not working.</p> <p>This is how my WordPress Nav Menu looks:</p> <pre><code>&lt;div class="nav-collapse collapse"&gt; &lt;ul class="nav"&gt; &lt;li class="cateogry-1"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li class="this-shall-become-active"&gt;&lt;a data-toggle="dropdown" class="dropdown-toggle" title="blog"&gt;Blog&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt; &lt;ul class="dropdown-menu"&gt; &lt;li class="category-1"&gt;&lt;a href="../blog/cat1"&gt;Blog Category 1&lt;/a&gt;&lt;/li&gt; &lt;li class="category-2"&gt;&lt;a href="../blog/cat2"&gt;Blog Category 2&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="somelink1"&gt;&lt;a href="#"&gt;Some Link 1&lt;/a&gt;&lt;/li&gt; &lt;li class="somelink2" &gt;&lt;a href="#"&gt;Some Link 2&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>The main goal, to add an .active class to the Blog menu, 2nd <code>&lt;li&gt;</code> of <code>ul#nav</code>, when a user is browsing mysite.com/blog and all other pages below /blog path</p> <p><strong>UPDATE 1</strong></p> <p>I can't find any current_page_parent or current_page_ancestor to my navs.</p> <p><strong>UPDATE 2</strong></p> <p>Reading from the wordpress codex site, I've found this</p> <pre><code>add_filter( 'wp_nav_menu_objects', 'add_menu_parent_class' ); function add_menu_parent_class( $items ) { $parents = array(); foreach ( $items as $item ) { if ( $item-&gt;menu_item_parent &amp;&amp; $item-&gt;menu_item_parent &gt; 0 ) { $parents[] = $item-&gt;menu_item_parent; } } foreach ( $items as $item ) { if ( in_array( $item-&gt;ID, $parents ) ) { $item-&gt;classes[] = 'menu-parent-item'; } } return $items; } </code></pre> <p>It adds class names to the parent <code>&lt;li&gt;</code>, I can now further target it and add the .active class name.</p> <p>Now, I needed the code to add the .active class to the menu-parent-item.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload