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

By: paolo

paolo — Sat, 13 Feb 2010 01:37:07 +0000

cannot see the complete code

By: ciphasublime

ciphasublime — Fri, 05 Feb 2010 16:01:53 +0000

It works fine. Thanks Alot. very useful when employing tab rollovers from
http://www.dynamicdrive.com/style/csslibrary/category/C1/

Thanks again

By: Shelly

Shelly — Thu, 27 Aug 2009 23:53:51 +0000

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)

By: Stuart

Stuart — Thu, 27 Aug 2009 07:46:44 +0000

Hi Shelly,You could try this for categories :)

< ?php
$categories = get_categories();
foreach ($categories as $cat) {
echo 'category_nicename.'/">'.$cat->cat_name.'';
}
?>

By: Shelly

Shelly — Wed, 26 Aug 2009 23:52:34 +0000

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!

By: Allan

Allan — Thu, 20 Aug 2009 07:05:34 +0000

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

By: bbrian017

bbrian017 — Tue, 28 Jul 2009 03:18:46 +0000

wow amazing you took to time to explain it to me as I seriously would never had known.

Thanks for the tutorial!

By: Stuart

Stuart — Mon, 27 Jul 2009 16:59:38 +0000

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

By: bbrian017

bbrian017 — Mon, 27 Jul 2009 15:28:02 +0000

I don’t really understand the purpose of doing this.

By: WPscoop

WPscoop — Sat, 25 Jul 2009 20:29:22 +0000

WPscoop…

Trackback WPscoop! http://wpscoop.com/Wordpress-Tutorials/Wordpress-Adding-span-Tags-To-Page-Or-Category-Menu-Navigation