Change ul class=”children” for wp_list_pages?

You can override this by supplying your on Walker Object when calling wp_list_pages, like this:

<your-template>.php

wp_list_pages(array(
    'title_li' => null,
    'depth' => 2,
    'child_of' => 0,
    'walker' => new My_Walker(),
));

Instead of the default Walker_Page this will make wp_list_pages use your custom walker, My_Walker. The only difference we need here is to make your entire list wrapped in the two divs you described in your question. To do this we need to override the methods start_lvl and end_lvl of Walker_Page. As defined below, the list will be wrapped in two divs when it’s on level 0 (the top most level), while subsequent lists will be plain ul elements.

functions.php

class My_Walker extends Walker_Page {

    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);

        if ($depth == 0) {
            $output .= "\n$indent<div class="container"><div class="container2"><ul>\n";
        } else {
            $output .= "\n$indent<ul class="children">\n";
        }
    }

    function end_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);

        if ($depth == 0) {
            $output .= "$indent</ul></div></div>\n";
        } else {
            $output .= "$indent</ul>\n";
        }
    }
}

Alternatively, as described in the link you supplied, just override the page_css_class and wrap each function call with your divs manually:

functions.php

function add_parent_class( $css_class = array(), $page = null, $depth = null, $args = array() )
{
    if ( ! empty( $args['has_children'] ) )
        $css_class = array();
    return $css_class;
}
add_filter( 'page_css_class', 'add_parent_class', 10, 4 );

<your-template>.php

<div class="container"><div class="container2"><ul>
<ul>
<?php wp_list_pages('title_li=&depth=2&child_of="); ?>
</ul>
</div></div>

Leave a Comment