WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

For a page template I am trying to include the 3 children of each page. That works fine.

However as I want to include a different image for each of the children, I would like to add the slug of each child to the li on the parent page.

I found something that places the slug of the parent page in the li's:

$slug = basename(get_permalink());
wp_list_pages('title_li=&sort_column=menu_order&link_before=<div class="'.$slug.'">&link_after=</div>&child_of='.$post->ID.'');

Obviously not what I want, but at least nice to see that it is possible somehow to add something to the li in order to be able to identify it further with CSS.

I would like the result to be something like:

<li class=child1-slug>...</li>
<li class=child2-slug>...</li>

OR (as the example above shows)

<li><a><div class="child1-slug">...</div></a></li>
<li><a><div class="child2-slug">...</div></a></li>

Can anyone push me in the right direction?

share|improve this question
up vote 1 down vote accepted

OK, I almost got it now... I extended the Walker_Page Class:

class Walker_Child_Classes extends Walker_page {
function start_el(&$output, $page, $depth, $args, $current_page) {
if ( $depth )
$indent = str_repeat("\t", $depth);
$indent = '';

extract($args, EXTR_SKIP);

$output .= $indent . '<li class="' . apply_filters( 'the_title', $page->post_name, $page->ID ) . '"><a href="' . get_page_link($page->ID) . '" title="' . esc_attr( wp_strip_all_tags( apply_filters( 'the_title', $page->post_title, $page->ID ) ) ) . '">' . $link_before . apply_filters( 'the_title', $page->post_title, $page->ID ) . $link_after . '</a>';

And added the following to my Page Template:

$sWalker = new Walker_Child_Classes();
wp_list_pages( array( 'title_li' => null, 'walker' => $sWalker, 'sort_column' => 'menu_order', 'child_of' => $post->ID ) );

Which results in:

<ul class="timeline">
<li class="Future">
<li class="Current">
<li class="Past">

I am not happy about the Capitals (it takes the Page name after all), but if this is what it is, then I can live with that...

If anyone has a suggestion on how to get the real slug that would be highly appreciated!

Edited the code with the suggestion of @mike23

share|improve this answer
Hi Piet, did you try $page->post_name instead of $page->post_title ? – mike23 Jul 26 '11 at 12:41
thanks @mike23 of course that gives exactly what I needed! Now it's perfect :) – Piet Jul 26 '11 at 12:50

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.