Support » Fixing WordPress » Highlight Page menu tab when browsing a Category page

  • Hello

    I’ve searched and maybe I can’t understand the solution…

    Currently, I have a top nav menu bar which consists of pages. For example, one menu tab is called Journal. Now I have a category called Issues. How do I highlight the page Journal tab when in the category Issues?

    I know I can create a dynamic nav menu with categories by putting code in the header file, but that mixes pages and categories and becomes mess to highlight the correct tab.

    Is there an elegant solution? Really appreciate the help


Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator Andrew Ozz


    WordPress Dev

    You don’t give an url to your site, so the advice is generic…

    If wp_list_pages() is used to create the menu, the current page gets the following:
    class="page_item current_page_item" so you can use the .current_page_item in your css to highlight it, like:
    .current_page_item { background-color : #678; } etc.

    Thanks for the reply azaozz

    Sorry, I’m testing my site on my pc, so not got an url. Using the light-10 theme

    Yes, menu is created with wp_list_pages and it uses the class as you point out. Pages are highligthed fine on the menu bar.

    But my problem is, what if I’m viewing a Category – in this case no menu page is highlighted because no Page is being called?

    In my theme there is a pagefunctions.php file which is where the page menu highlighting appears to happen. For example, section of code:

    foreach ( $page_tree[$parent]['children'] as $page_id ) {
    		$cur_page = $page_tree[$page_id];
    		$title = $cur_page['title'];
    		$css_class = 'page_item';
    		if ( $page_id == $queried_obj->ID )
    			$css_class .= ' current_page_item';
    		$output .= $indent . '<li class="' . $css_class . '"><a href="' . get_page_link($page_id) . '" title="' . wp_specialchars($title) . '"><span>' . $title . '</span></a>';

    I’m thinking, could I put some similar code in a category.php page to highlight an appropriate Page menu tab. I no coder as you can probably tell!


    Moderator Andrew Ozz


    WordPress Dev

    Hmmm, wp_list_pages() provides pretty good list of all pages and can be configured a lot. The function above seems to mimic some of the things wp_list_pages() does.

    There is also wp-list_categories() that lists the cats and outputs “current_page_item” too. Maybe check if there’s an updated version of this theme or adapt the above function to work with wp-list_categories(). Or just use wp_list_pages() and wp-list_categories() with the appropriate settings and tweak the css to display it right.

    Check here for more info:

    Well I clumsily figured it out (hope so!)

    Basically to

    if ( $page_id == $queried_obj->ID )

    I added various conditional ORs with the categories I wanted to include to be highlighted for a page tab.

    So for example:

    if ( $page_id == $queried_obj->ID || ( (in_category ('14') && $page_id == 60) || (in_category ('3') && $page_id == 60) etc

    Rather cumbersome, but seems to work for the light-10 theme, in case it helps anyone

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Highlight Page menu tab when browsing a Category page’ is closed to new replies.