Dynamic menu highlighting, wp_list_pages and sub-pages (4 posts)

  1. moshu
    Posted 11 years ago #

    Using the current_page_item class that is generated by the wp_list_pages tag when viewing a Page I could apply the "knowledge" in the Dynamic highlighting Codex article easily.
    However, if the Page has a child Page (aka sub-page) it gets highlighted, too - because it is listed in as a nested list inside the "current_page_item" list item.
    Any workaround not to get the children highlighted?

  2. jcdesign
    Posted 11 years ago #

    Shouldn't you just be able to un-highlight the child list items via CSS?

    e.g., assuming that '.current' is being used to indicate highlighting:

    .current {
    font-weight: bold;
    color: black;
    text-decoration: underline;
    background: white;

    .current ul {
    font-weight: normal;
    color: #333;
    text-decoration: none;
    background: #ccc;

    ...or something similar.

    If that doesn't sound right, give me a URI, and I might have another idea :)

  3. Joshua Sigar
    Posted 11 years ago #

    Can you not override the children styling with CSS? Do you have this in action?
    Yeah, what that guy ^^ said.

  4. ejkent
    Posted 10 years ago #

    I'm having the same problem as Moshu.

    When a Page is selected, all it's child pages are styled the same as the Page. I guess they are inheriting the current_page_item class from the li of the parent page.

    You can see it here: http://www.kenthealth.com
    Pages are in the sidebar under the heading 'Look Around'.

    Here's the CSS I'm using, per the suggestion of jcdesign and alphaoide, but it doesn't work:

    .current_page_item a,
    .current_page_item a:visited,
    .current_page_item a:hover {
    color: #f00;
    font-weight: bold;

    .current_page_item ul {
    color: #000;
    font-weight: normal;

    Any suggestions? Thanks a lot.

Topic Closed

This topic has been closed to new replies.

About this Topic