WordPress.org

Ready to get started?Download WordPress

Forums

Highlight Page menu tab when browsing a Category page (5 posts)

  1. snowcrash
    Member
    Posted 7 years ago #

    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

    thanks

  2. Andrew Ozz
    WordPress Dev
    Posted 7 years ago #

    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.

  3. snowcrash
    Member
    Posted 7 years ago #

    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!

    thanks

  4. Andrew Ozz
    WordPress Dev
    Posted 7 years ago #

    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:
    http://codex.wordpress.org/Template_Tags/wp_list_categories
    http://codex.wordpress.org/Template_Tags/wp_list_pages
    http://codex.wordpress.org/Template_Tags

  5. snowcrash
    Member
    Posted 7 years ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags