3

I just want to add a class for the active page in the wp_list_pages().Is it possible? If so can I provide a particular class for a active page. Here is my code for listing the parent page and its sub page.

       <?php



$output = wp_list_pages('echo=0&depth=1&title_li= &sort_column=menu_order' );
if (is_page( )) {
  $page = $post->ID;
  if ($post->post_parent) {
    $page = $post->post_parent;
  }

  $children=wp_list_pages( 'echo=0&depth=1&child_of=' . $page . '&title_li=&sort_column=menu_order' );
  if ($children) {
    $output = wp_list_pages ('echo=0&depth=1&child_of=' . $page . '&title_li= &sort_column=menu_order');
  }
}
?>
 <li><a href="<?php echo get_permalink( $post->post_parent ); ?>" class="active">Home</a></li>
<?php 
echo $output;


              ?>

Please help me.I want add the class name "active" to the active page in the wp_list_pages(). For example I want to display my WP pages as follows.If 1 select the sub page 3 I want to add the class active only to that particular page

<div class="page-menu">
                <ul>                    
                    <li><a href="#" title="">Home</a></li>
                    <li><a href="#" title="">1</a></li>
                    <li><a href="#" title="">2</a></li>
                    <li><a href="#" title="" class="active">3</a></li>
                    <li><a href="#" title="">4</a></li>
                    <li><a href="3" title="">5</a></li>
                </ul>
            </div>
1
  • Please reformat your code. The Q/A in here is a reference for later users who face the same problem as well. Thanks.
    – kaiser
    Sep 9, 2013 at 12:56

2 Answers 2

2

Problem solved..

I just add the css like as follows and it solve the my problem.

.page-menu ul li.current_page_item a{
    background-color:#445C1C;
    }

For adding the class for parent page I have used the following code

 <li><a href="<?php echo get_permalink( $post->post_parent ); ?>" <?php if(is_page($post->post_parent )) {?> class="active" <?php }?>>Home</a></li>

Hope this may help somebody in future who is facing the same problem, that I have faced :)

1

As wp_list_pages() has an argument of walker, you can use that to replace what is being used by walk_page_tree() as walker class internally.

@Brady has left a nice example in this answer.

class WPSE113482PageWalker extends Walker_Page
{
    function start_el( &$output, $page, $depth, $args, $current_page )
    {
        // Build $output here and apply your class for the active item
    }
}

You might also want to consider using wp_page_menu().

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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