Question

I am currently doing the following in my wordpress theme,

    <?php

$pagelist = wp_list_pages( array( 
    'include' => '154, 136', 
    'title_li' => '', 
    'sort_column' => 'ID', 
    'sort_order' => 'DESC', 
    'depth' => '0',
    'echo' => false
));

if($post->post_type == "casestudy") {
    $args = array( 'post_type' => 'casestudy');
    $case_studies = new WP_Query( $args );
    $casestudylist = "";
    foreach ($case_studies->posts as $k => $v) {
        $active = ""; 
        if($v->post_status == "publish") {
            if($v->ID == $post->ID)
            {
                $active = "current_page";
            }
            $casestudylist .= "<li class='subnav ".$active."'><a href=".$v->guid.">". substr($v->post_title, 0, strpos($v->post_title, ':')) ."</a></li>";
        }
    }
}


$testimonials = wp_list_pages( array( 
    'include' => '318', 
    'title_li' => '', 
    'sort_column' => 'ID', 
    'sort_order' => 'DESC', 
    'depth' => '1',
    'echo' => false
));
//die(print_r($casestudylist));

$concatenatedlist = $pagelist . $casestudylist . $testimonials;

?>



<aside class="secondary">
    <nav>
        <ul>
            <?php echo $concatenatedlist; ?>
        </ul>
    </nav>
</aside>

This builds a navigation, and gives the impression that a page has some children that are built with custom post types. The problem is that if I’m looking at a post from the $casestudylist I need to somehow also add an active class onto the first link that comes from $pagelist, even though the two are unrelated. I don’t mind if it is a jQuery solution. Basically, if an element in my casestudylist is active, I need to have the case study link marked as active also.

Here is the HTML the PHP creates.

    <aside class="secondary">
    <nav>
        <ul>
                <li class="page_item page-item-154">
                      <a href="/clients">Clients</a>
                    </li>
                    <li class="page_item page-item-136">
                        <a href="/case-study">Case Study</a
                    </li>
                    <li class="subnav current_page">
                        <a href="/?post_type=casestudy&amp;p=161">Brenntag</a>
                    </li>
                    <li class="subnav ">
                         <a href="/?post_type=casestudy&amp;p=104"></a>
                    </li>
                    <li class="subnav ">
                         <a href="?post_type=casestudy&amp;p=65"></a>
                    </li>
                    <li class="page_item page-item-318">
                        <a href="/testimonials">Testimonials</a>
                    </li>
        </ul>
    </nav>
</aside>

Answer 1

To do it in jQuery you could say:

if($('li.subnav.current_page').length>0) {
    $('li.page-item-136').addClass('current_page');
}

But hard-coding the post ID isn’t very robust, nor is relying on jQuery to apply a style that WP should be serving.

There are a few ideas here worth looking into, but my gut reaction is to do one of the following:

• Substitute pages with parent-child relationships for the page and custom posts
• Create a custom taxonomy to envelop all the pages involved, and alter your theme to display it.