WordPress.org

Forums

Customizing Behavior of current_page_ancestor CSS tag (4 posts)

  1. jda10487
    Member
    Posted 4 years ago #

    I use wp_list_pages() to generate the menu in my header.

    This works for all pages and subpages as I can use the current_page_item and current_page_ancestor tags to keep the top-level section highlighted as the user navigates around sub-pages.

    But here's the issue: I have a top-level page called "Authors" which uses a custom page template to loop through all the authors in the WP installation. It links to the Author page (author.php) when a user clicks on a specific author. So when the user goes to my custom top-level "Authors" page, the "Authors" page in the menu gets the "current_page_item" CSS tag, so I can style it correctly.

    However, when the user clicks on an author and gets sent to the "author.php" page, the "Authors" section in the menu is no longer highlighted.

    How can I correct this behavior short of overriding the wp_list_pages function and reg-ex'ing the output? My current thoughts:

    1. I could try to fool WP into thinking that I'm still on the Authors page when I'm really on a specific author.php page so that it would give me the correct tags whenever I'm in author.php.
    2. I could embed some CSS to the author.php page to re-style the Authors tab by addressing a specific page-id tag in the menu.

    I'm not sure how to do #1, and #2 is just too ugly.

    Any thoughts? Thanks in advance.
    Jeff

  2. DigitalSquid
    Member
    Posted 4 years ago #

    You could use the is_author() function to add an extra class on your header div that only appears on the author pages. Then if you find out what the page ID for the top level Author page is you could use both to create a new CSS selector that only styles that specific menu item on the author pages.

    So, for example, if you called the new header class .author_page and the Author page ID was 5 you could just add .author_page .page-item-5 to your current CSS styling for .current_page_item

  3. jda10487
    Member
    Posted 4 years ago #

    Perfect! Very elegant solution -- thanks for your help.

    Worked like a charm.

  4. cronnicj
    Member
    Posted 4 years ago #

    Thanks for this. It took me a minute to figure out what you were saying so I decided to share some code to help others. Not sure if this is the perfect way to do this but it works.

    header.php

    <?php if ( is_author( ) ) { ?>
         <div id="navigation">
         	<div id="author-page">
    			 <ul>
    				<?php
                     $current_page = $post->post_parent;
                     $top_level = wp_page_menu('show_home=1&title_li=&depth=1&sort_column=menu_order&echo=0');
                     // Put it all together
                     $menu .= $top_level;
                     print $menu;
                    ?>
    			</ul>
    	 	</div>
         </div>
         <? } else { ?>
         <div id="navigation">
    			<ul>
    				<?php
                     $current_page = $post->post_parent;
                     $top_level = wp_page_menu('show_home=1&title_li=&depth=1&sort_column=menu_order&echo=0');
                     // Put it all together
                     $menu .= $top_level;
                     print $menu;
                    ?>
    			</ul>
    	 	</div>
         <?php } ?>

    CSS

    #navigation #author-page li.page-item-6 {
    ...
    }

    Thanks again!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.