Customizing Behavior of current_page_ancestor CSS tag

  • jda10487

    (@jda10487)


    13 years, 5 months 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

Viewing 3 replies - 1 through 3 (of 3 total)
  • DigitalSquid

    (@twelvefootsnowman)

    13 years, 5 months 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

    Thread Starter jda10487

    (@jda10487)

    13 years, 5 months ago

    Perfect! Very elegant solution — thanks for your help.

    Worked like a charm.

    cronnicj

    (@cronnicj)

    13 years, 5 months 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!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Customizing Behavior of current_page_ancestor CSS tag’ is closed to new replies.