Add class to the items in wp_list_pages

1 Views

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>
Post Views: 1

Related posts

2 comments

  1. 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 🙂

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

Comments are closed.