Support » Fixing WordPress » Conditional nav – highlight sub pages as “current” ?

  • jamble

    (@jamble)


    Hi folks,

    I’m not quite sure how to go about this but I’d like to create a loop (i think it’s a loop) for my site navigation on this site: http://losclothing.welcomebrand.co.uk/

    Basically if you go to a page such as “our products” or “riders blogs” I’d like them to be highlighted in the same way in the main nav across the top as you would get if you were on the homepage.

    I’d like to specify somehow “if you’re on page id 29 – show it as current and show any pages where id29 is the parent as current”

    I’m really not sure how to go about this so any help would be hugely appreciated!

    Many thanks,

    J.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter jamble

    (@jamble)

    Sorry for the bump but I wonder if anyone is able to help on this one?

    Thanks!

    abelcreative

    (@abelcreative)

    Super easy man, by default WordPress assigns classes to current pages li items, and than changes that class if the current page has a parent.

    For current page, the class is ‘current_page_item’
    If that page has a parent, it will change to ‘current_page_parent’ and if you have dynamic subnav available in your theme, the link of the page you’re on will include the ‘current_page_item’ as a class. So using CSS you can style those links to change with that class. Hope that makes sense.

    You can read all about it (and how to dynamically show your subpages) here – http://codex.wordpress.org/Template_Tags/wp_list_pages

    Thread Starter jamble

    (@jamble)

    Thanks for the post, unfortunately it’s not so super easy ..

    If you take a look at the source on the “our products” page and also the “riders blogs” for example, it doesn’t add the current_page_item class to the navigation list or add any other class that is current to the page I’m on.

    For example, here is the nav list source for the “riders blogs” index page

    <li class=”page_item page-item-15″>Home

    <li class=”page_item page-item-17″>Our products

    <li class=”page_item page-item-18″>Stockists

    <li class=”page_item page-item-19″>Riders blogs

    <li class=”page_item page-item-20″>About us

    <li class=”page_item page-item-35″>Links

    <li class=”page_item page-item-21″>Contact

    <li class=”page_item page-item-47″>Our team

    <li class=”page_item page-item-22″>Latest news

    As you can see, there is no class on the list I can use to apply the current page style. It’s strange because if you look on a page such as “about us” then the class current_page_item does appear and it works on there but not some of the other pages.

    abelcreative

    (@abelcreative)

    I believe this is a new feature in WP 2.3.3 – what version are you running?

    Thread Starter jamble

    (@jamble)

    I’m running 2.3.3 at the moment, everything up to date etc.

    I just thought I’d probably need to create some sort of dynamic code in the header for the navigation to assign a class or id on the list based on page/category id but I’m not sure how to do this and the dynamic tags help doesn’t really say how to do it in this way.

    abelcreative

    (@abelcreative)

    that post explains everyting you need to add nav dynamically:

    for main nav:

    <ul>
    <?php
    wp_list_pages('title_li='); ?>
    </ul>

    for sub pages:

    <ul>
    <?php
    wp_list_pages('title_li=&child_of='.$post->ID.'&show_date=modified
    &date_format=$date_format'); ?>
    </ul>
Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Conditional nav – highlight sub pages as “current” ?’ is closed to new replies.