0

I am running wp_list_pages through a while loop to create a custom menu. By running it through a loop I can target specific elements to show. I need to figure out how to either target the classes autmotically created by wp_list_pages or to apply a custom active page class to the list my while loop generates.

This is the code I am using:

<?php echo '<ul>';

$args = array(
    'post_type' => 'page',
    'post_status' => 'publish',
    'posts_per_page' => -1,
    'post_parent' => $post->post_parent,
);
$query = new WP_Query($args);
while ($query->have_posts()) {
      $query->the_post();

$child = get_pages('child_of='.$post->ID);

if( count( $child ) != 0 ) : ?>
      <li class="has-children"><span><?php the_title(); ?></span>
      <?php $children = wp_list_pages( 'title_li=&child_of='.$post->ID.'&echo=0' );
      if ( $children) : ?>
           <ul class="children">
               <li><a href="<?php the_permalink(); ?>">Overview</a></li>
               <?php echo $children; ?>
           </ul>
      <?php endif; ?>
      </li>                           
<?php else : ?>
      <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>

<?php endif; 
}
echo '</ul>'; ?>

Which produces this output if on page 2.2 (notice the class current_page_item) :

<ul>
    <li><a href="http://website.com/page-1">Page 1</a></li>
    <li class="has-children"><span>Page 2</span>
        <ul class="children">
            <li><a href="http://website.com/page-2">Overview</a></li>
            <li class="page_item page-item-115"><a href="http://website.com/page-2/page-2-1">Page 2.1</a></li>
            <li class="page_item page-item-116 current_page_item"><a href="http://website.com/page-2/page-2-2">Page 2.2</a></li>
        </ul>
    </li>
    <li><a href="http://website.com/page-3">Page 3</a></li>
    <li><a href="http://website.com/page-4">Page 4</a></li>

If on page 1, the output is (notice no class indicating active page):

<ul>
    <li><a href="http://website.com/page-1">Page 1</a></li>
    <li class="has-children"><span>Page 2</span>
        <ul class="children">
            <li><a href="http://website.com/page-2">Overview</a></li>
            <li class="page_item page-item-115"><a href="http://website.com/page-2/page-2-1">Page 2.1</a></li>
            <li class="page_item page-item-116"><a href="http://website.com/page-2/page-2-2">Page 2.2</a></li>
        </ul>
    </li>
    <li><a href="http://website.com/page-3">Page 3</a></li>
    <li><a href="http://website.com/page-4">Page 4</a></li>

You'll notice that the li's in my second <ul> have the class current_page_item if on that page because I'm relying purely on wp_list_pages to generate the list. I want to find a way to add either an active class to the first <ul> if one of it's li's is the current page or target the classes that wp_list_pages dynamically creates.

0

Found the answer here: Add class to the items in wp_list_pages

Just add <?php if(is_page($post->ID )) {?> class="current_page_item" <?php }?>. I added it to the <li> that contained my Overview link in the second level <ul class="children"> as well as the <li> in the top level <ul> if the page doesn't have children.

<?php echo '<ul>';

$args = array(
    'post_type' => 'page',
    'post_status' => 'publish',
    'posts_per_page' => -1,
    'post_parent' => $post->post_parent,
);
$query = new WP_Query($args);
while ($query->have_posts()) {
      $query->the_post();

$child = get_pages('child_of='.$post->ID);

if( count( $child ) != 0 ) : ?>
      <li class="has-children"><span><?php the_title(); ?></span>
      <?php $children = wp_list_pages( 'title_li=&child_of='.$post->ID.'&echo=0' );
      if ( $children) : ?>
           <ul class="children">
               <li <?php if(is_page($post->ID )) {?> class="current_page_item" <?php }?>><a href="<?php the_permalink(); ?>">Overview</a></li>
               <?php echo $children; ?>
           </ul>
      <?php endif; ?>
      </li>                           
<?php else : ?>
      <li <?php if(is_page($post->ID )) {?> class="current_page_item" <?php }?>><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>

<?php endif; 
}
echo '</ul>'; ?>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.