Wordpress Adding “span” Tags To Page Or Category Menu Navigation

Written by Stuart on Saturday, July 25th, 2009 in Wordpress Snippets

Whilst i was redesigning the WPscoop site i made a decision to blog more about subjects relating to wordpress and share any code snippets that may be of interest to you. In this first post i will explain how to wrap either your page or category menu title within “span” tags, this can be useful when theming wordpress menus with images like we have her at WPscoop. On with the code then.

The standard wordpress function that calls menus from your wordpress theme usually looks like below for categories and pages.

 <?php wp_list_categories('sort_column=menu_order&title_li='); ?>

 <?php wp_list_pages('sort_column=menu_order&title_li='); ?>

These basic function’s will return the string below for each menu item.

<li><a href="http://www.scooptut.com">Home</a></li>

Sometimes however when we are developing a theme in HTML and CSS we need the word Home in the above link to be surrounded by html span tags for css theming like the example below.

<li><a href="http://www.scooptut.com"><span>Home</span></a></li>

When researching how to acheive this for our own wordpress theme we read a lot of posts on the we that seemed to over-complicate the process, have lengthy code snippets or simply didn’t work. We believe that the solution below is compact and most probably the best way to acheive the span tags you require in either your page or category menus.

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

<?php wp_list_categories('orderby=name&link_before=<span>&link_after=</span>&title_li=&depth=1'); ?>

Let us know if it works for you

Tags: code snippet, wordpress development, wordpress hacks, wordpress menu span, wordpress tutorial

10 Comments

bbrian017 says:
July 27, 2009 at 8:28 am
I don’t really understand the purpose of doing this.
Reply
- Stuart says:
  July 27, 2009 at 9:59 am
  Hi Brian,
  The reason behind this code snippet is for people wanting to theme their wordpress menu/category navigation buttons with background images and css. It allows the designer to have a left image tab and a right image tab that together creates the single button image around each menu item. It also allows variable length of button as the link titled Home is much shorter than the link titled Register on your site.
  With wordpress retrieving and printing out it’s menus through PHP the code we posted above will wrap your menu title element between span tags before printing out the menu items to HTML which can then be styled with CSS.
```
#menu li a {
      background: url(images/nav-btn.gif) no-repeat left;color:#fff;text-decoration:none;padding:0 0 0 10px

}
#menu li a span {
      background: url(images/nav-btn-left.gif) no-repeat right;display:inline-block;height:30px;padding:0 10px 0 0;
}
```
  This particular “span” technique is widely used in many designs across the web, our little php snippet helps you acheive it in wordpress. Hope that explains things a little better for you brian
  Reply
  - bbrian017 says:
    July 27, 2009 at 8:18 pm
    wow amazing you took to time to explain it to me as I seriously would never had known.
    Thanks for the tutorial!
    Reply
- Allan says:
  August 20, 2009 at 12:05 am
  How do you add the extra arguments to the pages widget in a side bar where I am also using other widgets (dynamic sidebar). Not sure how I can pass in the link before and link after properties
  Reply
Shelly says:
August 26, 2009 at 4:52 pm
Nope – doesn’t work for wp_list_categories. No such parameters for that tag – it has no effect. But if you ever figure out how to do it, I’d love to know!
Reply
- Stuart says:
  August 27, 2009 at 12:46 am
  Hi Shelly,
  You could try this for categories
```
< ?php
  $categories = get_categories();
  foreach ($categories as $cat) {
  echo '
category_nicename.'/">'.$cat->cat_name.'';
  }
?>
```
  Reply
  - Shelly says:
    August 27, 2009 at 4:53 pm
    Well, yeah That, I knew. but the idea of “before_link” and “after_link” was just too awesome. it would be great f they had it, but they don’t. So I have to stick with other solutions like this one (I’m currently using the preg_replace thing – but “before” and “after” would be so much simpler, because regex is my enemy LOL)
    Reply
  - paolo says:
    February 12, 2010 at 6:37 pm
    cannot see the complete code
    Reply
ciphasublime says:
February 5, 2010 at 9:01 am
It works fine. Thanks Alot. very useful when employing tab rollovers from
http://www.dynamicdrive.com/style/csslibrary/category/C1/
Thanks again
Reply