Styling Your WordPress Page List

In customizing WordPress navigation bards I have found it increasingly important to continue to add addition html into such WordPress functions as a simple page list. As as example I sought to add a <span> before and after each link in a standard page list.

I have come across two solid solutions. One being a custom page list:

<ul>
  <?php $list = wp_list_pages('echo=0&title_li=');
  $list = str_replace('<a ','<span><a ',$list);
  $list = str_replace('</a> ','</a></span>',$list);
  echo $list; ?>
</ul>

However the second solution is a simple update to the wordpress page list that is already commonly used throughout wordpress template files:

<ul>
<?php wp_list_pages('title_li=&depth=1&link_before=<span>&link_after=</span>'); ?>
</ul>

You may want to also include the additional sort order function when adding the page list to your blog's setup:

<ul>
<?php wp_list_pages('sort_column=menu_order&title_li=&depth=1&link_before=<span>&link_after=</span>'); ?>
</ul>

Speak Your Mind

*

CAPTCHA image
*