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 Jul 17 '17 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". – Josh Rodgers Jul 17 '17 at 12:14

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 );
| improve this answer | |
  • 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. – Josh Rodgers Jul 17 '17 at 22:01
  • oh, I suppose you wanted album highlighted, not gallery. – Milo Jul 17 '17 at 22:31
  • Yes I did, I'm sorry, I should've been more specific. – Josh Rodgers Jul 18 '17 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 :-) – Josh Rodgers Jul 18 '17 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.


| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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