wp_list_pages: customize the look of pages that have children

Here’s a quick tip for WordPress and the use of wp_list_pages to create menus.

On a web site you often have pages with sub-pages/children and often you want to style these pages a bit different. Perhaps add a plus-sign or an arrow in front of the page. When I was working with Nice Navigation for WordPress I noticed that this was not possible by default in WordPress. It is however pretty easy to fix. Just add this code to your functions.php:

add_filter('page_css_class', 'nice_navigation_page_css_class', 10, 2);
/**
 * adds class "page-has-children" to all pages that have children
 * @param array $class.    The page css class being modified, passed as an array from Walker_Page
 * @param object $page.    The page object passed from Walker_Page
 * @return array            Returns the new page css class.
 */
function nice_navigation_page_css_class($class, $page) {
 // check if current page has children
 $children = get_pages('child_of='.$page->ID);
 if (sizeof($children) > 0) {
  $class[] = "page-has-children";
 }

 return $class;
}

Now every page outputted by wp_list_pages have the class “page-has-children” and you can style them any way you want.

Leave a Reply