How to add span tag into category or page navigation

We like to use rounded corners to highlight navigation using CSS sliding doors technique, don’t we?

To achieve this, each navigation item would need to be sorrounded by span tag. When we hard-code the navigation it’s not a problem, but when we have to use wp_list_categories or wp_list_pages, it’s becoming a problem.

However, this snippet adds tag inside list item. You can just paste this into your header.php or a template files where you want to show navigation.

<?php 
	echo preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i', '<li$1><a$2><span>$3</span></a>',wp_list_categories('echo=0&orderby=id&title_li=&depth=1')); 
?>

Of course you can use this for page navigation too, you just swap wp_list_categories with wp_list_pages.

Author: Takashi Irie

Takashi Irie is an experienced commercial web designer and Wordpress expert based in London. He is very passionate about web design, typography, grid systems as well as Wordpress.

2 Comments

omegapowers  on February 11th, 2010

how to highlight current page item in this?

WP London  on February 11th, 2010

Hi Omegapowers, It should automatically add a class “current_page_item” to the list item. You can just style it differently to highlight it.

Leave a Comment