Highlighting Parent Pages When on a Child Page

  • Hi there,

    Ive had a little hunt through the forums and have found alot of examples but none that i can get working with how ive made my site.

    Bassically i want my Parent pages to be highlighted using id=current when on a child page.

    My Parent pages are list items using background images and my child pages are text.

    Below is my current code.

    Any help would be greatly appreciated.

    <div id="nava">
	<ul id="menu">
    	<li <?php if (is_page('Home')) { echo "id=\"current\"";}?> class="home"><a href="/"><strong>Home</strong></a></li>
        <li <?php if (is_page('Never Green Pool Valets')) { echo "id=\"current\""; }?> class="neverGreen"><a href="/never-green-pool-valets"><strong>Never Green Pool Valets</strong></a></li>
        <li <?php if (is_page('Well Be There Repair Service')) { echo "id=\"current\""; }?> class="repairService"><a href="/well-be-there-repair-service"><strong>We'll Be There Repair Service</strong></a></li>
        <li <?php if (is_page('Specialist Products')) { echo "id=\"current\""; }?> class="specialistProducts"><a href="/specialist-products"><strong>Specialist Products</strong></a></li>
        <li <?php if (is_page('Contact and Bookings')) { echo "id=\"current\""; }?> class="contactBookings"><a href="/contact-and-bookings"><strong>Contact and Bookings</strong></a></li>
     </ul>
</div>
<div id="subnav">
<?php
if($post->post_parent)
$children = wp_list_pages("sort_column=menu_order&title_li=&child_of=".$post->post_parent."&echo=0"); else
$children = wp_list_pages("sort_column=menu_order&title_li=&child_of=".$post->ID."&echo=0");
if ($children) { ?>
<ul>
<?php echo $children; ?>
</ul>
<?php } ?>
</div>
Viewing 3 replies - 1 through 3 (of 3 total)

  • What’s the output i.e. view source and paste how it appears. It looks ok but need to be sure.

    What’s the css for the list elements and the current id?

    Thread Starter sollynz

    (@sollynz)

    This is one a sub page of never green pool valets 

    <div id="nava">
	<ul id="menu">

    	<li  class="home"><a href="/"><strong>Home</strong></a></li>
        <li  class="neverGreen"><a href="/never-green-pool-valets"><strong>Never Green Pool Valets</strong></a></li>
        <li  class="repairService"><a href="/well-be-there-repair-service"><strong>We'll Be There Repair Service</strong></a></li>
        <li  class="specialistProducts"><a href="/specialist-products"><strong>Specialist Products</strong></a></li>
        <li  class="contactBookings"><a href="/contact-and-bookings"><strong>Contact and Bookings</strong></a></li>
     </ul>
</div>
<div id="subnav">
<ul>
<li class="page_item page-item-28"><a href="https://poolmagic.co.nz/never-green-pool-valets/chlorine-free-systems/" title="Chlorine Free Systems">Chlorine Free Systems</a></li>

<li class="page_item page-item-30 current_page_item"><a href="https://poolmagic.co.nz/never-green-pool-valets/pool-toys/" title="Pool Toys">Pool Toys</a></li>
<li class="page_item page-item-32"><a href="https://poolmagic.co.nz/never-green-pool-valets/valet-accessories/" title="Valet Accessories">Valet Accessories</a></li>
<li class="page_item page-item-34"><a href="https://poolmagic.co.nz/never-green-pool-valets/algae-removal-phosphates/" title="Algae Removal, Phosphates">Algae Removal, Phosphates</a></li>
<li class="page_item page-item-36"><a href="https://poolmagic.co.nz/never-green-pool-valets/valet-staff/" title="Valet Staff">Valet Staff</a></li>
</ul>
</div>

    You haven’t posted any CSS (or a link to a site) so all I can hazard a guess at (on the information presented here) is that you’re using #current in the CSS file (style.css) but that your actual html uses
    class=”current_page_item”

    Check your css.

    You might need to change #current to .current_page_item

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Highlighting Parent Pages When on a Child Page’ is closed to new replies.