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:

[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;
}
[/php]

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