You’re asking how to change the wp_list_pages code, but instead, I think you can probably do what you want with CSS. Here’s an example of a horizontal menu using the existing wp_list_pages output, and extra div tag, and some brilliant CSS code from Stu Nicholls at https://www.cssplay.co.uk.
Because Stu’s code, in this example, puts a class on the ul tag and we can’t do that with wp_list_page, I’ve wrapped wp_list_pages with a div and modified Stu’s CSS accordingly. You can see Stu’s original example at Stu Nicholls | CSSplay | Horizontal unordered list non floating.
<div class="menu centered">
<?php wp_list_pages('title_il=&sort_column=menu_order'); ?>
</div>
<style type="text/css">
.menu ul {
display:table; /* ignored by IE */
padding:0;
list-style-type:none; white-space:nowrap; /* keep text on one line */ border:1px solid #06a; /* add a border to show size of menu */ }.menu ul li { display:table-cell; /* ignored by IE */
}
.menu ul a, .menu ul a:visited {
display:block; /* for all browsers except IE */ padding:4px 16px; color:#000; background:#d4d4d4; border:1px solid #fff; /* add a 1px white border around each list item */ text-decoration:none; }
.menu ul a:hover {
color:#fff;
background:#08c;
}
.lefted ul {margin:0 auto 0 0;}
.centered ul {margin:0 auto;}
.righted ul{margin:0 0 0 auto;}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.menu ul {
display:inline-block; /* for IE only */
width:1px; /* IE will expand 1px width to fit menu width */
padding:0 2px; /* fix bug in IE to get border spacing correct */
}
.menu ul li {
display:inline; /* for IE only */ }
.menu ul a, .menu ul a:visited {
display:inline-block; /* for IE only */
margin:0 -2px; /* to correct an IE bug that doubles the border width */
}
</style>
<![endif]-->
There are many other ways to style a menu using CSS. This is just one example. Also, don’t forget that there are several parameters you can change for wp_list_pages. See the WordPress documentation for wp_list_pages for more information.