Last week, i was doing a PSD to wordpress CMS work. There was a footer menu, in which pages are separated by a horizontal line. I just simply listed the pages and added line as border in CSS.

#nav li a{border-right: 1px solid #ccc;}

But the client said they want a ‘printer friendly’ menu seperated with “|” symbol.

a menu like this:

Home  |   About  |  Contact

The list pages function, displays only as a list, ie it adds html tag <li&> and </li&> to every elements. It will result only vertical list with bullets if css is disabled.

There is a way to remove thos “li”s. using the the preg_replace php function

here is the code to display wordpress pages separated with |


<a href="/">
Home

<?php $pages = wp_list_pages('sort_column=menu_order&title_li=&echo=0');
$pages = preg_replace('%

  • ]+)>%U',' | ', $pages);
    $pages = str_replace('

    • ','', $pages);
    echo $pages; ?>

    This will replace li with span and ‘|’. This can be used to add more tags like divs or span in the page list.

    same code can be used with list category function also