WordPress.org

Ready to get started?Download WordPress

Forums

wp_list_pages without ul li (4 posts)

  1. 2046
    Member
    Posted 6 years ago #

    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

  2. moshu
    Member
    Posted 6 years ago #

    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?

  3. 2046
    Member
    Posted 6 years ago #

    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

  4. designsimply
    Member
    Posted 6 years ago #

    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 http://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.

Topic Closed

This topic has been closed to new replies.

About this Topic