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">
        <?php wp_list_pages("title_li="); ?>

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?


  • What is a gallery, a page, a custom post type? You can filter the css classes in the menu, you just need to be able to identify when you're viewing a gallery.
    – Milo
    Commented Jul 17, 2017 at 2:13
  • Hey there, I am using a plugin called Envira Gallery (enviragallery.com) to create the gallery. I was looking through the code and it does look like it uses a post type called "envira". Commented Jul 17, 2017 at 12:14

2 Answers 2


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 );
  • Hey there, I added this to my functions.php file, but it didn't seem to do anything...I was able to find a solution though (see below) and appreciate you taking a look. Commented Jul 17, 2017 at 22:01
  • oh, I suppose you wanted album highlighted, not gallery.
    – Milo
    Commented Jul 17, 2017 at 22:31
  • Yes I did, I'm sorry, I should've been more specific. Commented Jul 18, 2017 at 1:31
  • I went back and added your solution, changing gallery to albums and it worked! I apologize for not understanding your function...if you'll update your code, I'll make sure to choose this as the answer :-) Commented Jul 18, 2017 at 1:35

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") ) { ?>
        $(function() {
<?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.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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