WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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.


$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>
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">
                    <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>
share|improve this question
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 '13 at 12:56

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().

share|improve this answer
up vote 0 down vote accepted

Problem solved..

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

.page-menu ul li.current_page_item a{

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 :)

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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