Support » Fixing WordPress » wp_list_pages without ul li

  • hello

    do you know any sollution or plugin that let me generate “list” of pages without ul, li tags, just like they are, the better each with some span or div?

    thx 2046

Viewing 3 replies - 1 through 3 (of 3 total)
  • Not without altering core files, which is not advisable.

    Why would you need that? (since the output adds a class or two) to every list item)
    What do you want to do? What is the goal?



    the goal was to sort out links in the line, give it certain behavior which wasn’t unable to do when it was surronded by ul, li…believe me I have spend on it couple day, but the result wasn’t same on all browseers so i finally hardcoded my them, and delete all ul li from wp_list_pages, so the result is now something like
    span content end-span

    thanks for interest




    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

    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'); ?>
    <style type="text/css">
    .menu ul {
      display:table;           /* ignored by IE */
      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 {
    .lefted ul {margin:0 auto 0 0;}
    .centered ul {margin:0 auto;}
    .righted ul{margin:0 0 0 auto;}
    <!--[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 */

    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.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘wp_list_pages without ul li’ is closed to new replies.