Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm using the Wordpress Bootstrap theme as my base theme.

It uses the following code to add the class "active" to any links in the header if the user is currently on that page:

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;

}

However, I have multiple pages that I want to display as "active" when the user is not actually on that specific page. For example, users may sometimes be on "tutorials-by-topic" (Tutorials by Topic) but I want the link titled "Tutorials" to be displayed as the active link. I have four pages I want to do this way. I have tried different conditionals, etc. in the add_active_class function but I've had no luck. Any guidance? Thanks!

share|improve this question
add comment

2 Answers

up vote 1 down vote accepted

Not the cleanest solution, but I use something like this for a few instances of current page menu highlighting for pages that aren't child/parent related in any way:

<?php if (is_page('tutorials-by-topic') { ?>
<script type="text/javascript">
jQuery(function($) {
$(document).ready(function() {
$('#menu-main-menu li.menu-item-1319').addClass('current-menu-item');
}); });
</script>
<?php } ?>

You have to look at the source to get the correct menu-item-xxxx for the page that you want to highlight as current in the menu.

share|improve this answer
    
With a few small changes, this worked. Thank you! –  Jakemmarsh Mar 15 '13 at 2:53
add comment

When using the nav menu, the parent menu item as well as the ancestor menu items are provided with the respective classes current-menu-parent and current-menu-ancestor. Those class selectors may be used for styling the links.

If you want to apply the exact same style the menu item with the active class has, just add the selectors to the particular CSS block in your stylesheet. Otherwise style them differently by means of new dedicated CSS blocks.

share|improve this answer
    
All of these pages will actually be siblings. None of them will have parents or children, and so cannot be selected as parents or ancestors (I don't think). –  Jakemmarsh Mar 14 '13 at 3:26
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.