WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] highlight "parent" nav link when on "child" page (7 posts)

  1. gallo
    Member
    Posted 5 years ago #

    hello.

    when i'm on a "child" page i would like the "parent" in the navigation to be highlighted/active.

    the theme i'm using has it's own navigation.php page. here is the code:

    <div id="menu">
    <ul id="nav">
    <?php wp_list_pages('sort_column=menu_order&title_li=&depth=1'); ?>
    </ul>
    </div>

    could someone point me in the right direction?

    thank you.

  2. gallo
    Member
    Posted 5 years ago #

    i was thinking i'd find my answer here:

    http://codex.wordpress.org/Conditional_Tags

    i read through it but i don't see the answer for my particular question.

    my thought is that it's common for people to have wordpress websites/blogs with child pages that are intentionally not shown in the menu. but, when someone is at the child page they probably wouldn't want the menu to show that none of the pages are active. seems logical to wish for the parent to be highlighted. am i wrong?

    if anyone has insight that would be wonderful.

    thanks again.

  3. Austin Matzko
    Member
    Posted 5 years ago #

    when i'm on a "child" page i would like the "parent" in the navigation to be highlighted/active.

    wp_list_pages() adds the classes "current_page_parent" and "current_page_ancestor" to the parent list element, so you should be able to use that for highlighted styling.

  4. gallo
    Member
    Posted 5 years ago #

    thanks, this worked. much appreciated. : )

  5. jurjak
    Member
    Posted 5 years ago #

    So how did you do?

  6. scott karlins
    Member
    Posted 5 years ago #

    Indeed!, How did you do it? Can you provide examples of your code?

    Thanks!
    Scott K.

  7. inko9nito
    Member
    Posted 5 years ago #

    Just add a selector for current_page_ancestor in your current_page_item declaration, so that they are styled the same. So, it would be:

    .current_page_item,
    .current_page_ancestor {
    ...
    }

Topic Closed

This topic has been closed to new replies.

About this Topic