Highlight another nav item

Question

I am using WordPress to develop a picture gallery website. I have albums and galleries, with different permalinks...http://url.com/albums and http://url.com/gallery, but only the albums appear in the main navigation.

The code for my navigation looks like:

<div id="nav">
    <ul>
        <?php wp_list_pages("title_li="); ?>
    </ul>
</div>

Because I am using the wp_list_pages() function, the current page that you're on gets a current_page_item class added to the li tag.

The gallery page is not part of the main navigation, so when someone is viewing one of the gallery pages, nothing is highlighted in the main navigation.

I'd like to highlight the album page in the main navigation when someone is viewing a gallery page. Because each gallery is in album, it makes sense to highlight that page.

Can anyone point me in the right direction?

Thanks,
Josh

Answer 1

The page_css_class filter lets you modify the classes each menu item gets.

Here we check if we are currently viewing a singular envira post type and the menu item slug is gallery. In that case we add a class to the array of default classes passed to the function.

function wpd_page_css_class( $css_class, $page ){
    if( is_singular( 'envira' ) && 'albums' == $page->post_name ){
        $css_class[] = 'current_page_item';
    }
    return $css_class;
}
add_filter( 'page_css_class', 'wpd_page_css_class', 10, 2 );

Answer 2

After some poking around, I found my answer here: https://forum.jquery.com/topic/jquery-addclass-to-containing-li-based-on-a-href-contents from Przemek (4th comment down).

All I did was make sure that the code is only executed on the gallery page:

<?php if ( is_singular("envira") ) { ?>
    <script>
        $(function() {
            $('li.page_item').find('a[href*="/albums/"]').parent().addClass('current_page_item');
        });
    </script>
<?php } ?>

This works, because it finds the list item with the albums permalink and adds the class I need. If I ever change the page order, the script will still work. The only time this would be an issue is if my permalink changes, but for this site, that is not an issue.

Thanks,
Josh