Adding links to WordPress navigation lists

WordPress likes making lists for navigation. So you might have a list of pages like this:

<ul><? wp_list_pages("title_li="); ?> </ul>

or a list of categories like this:

<ul><? wp_list_categories("title_li="); ?> </ul>

which, if you like, you can then style with CSS to make a horizontal navigation bar. Because WordPress doesn't automatically add the ul tags, it's easy enough to add in extra links to these lists just by appending an extra li to the list. So to add a "home" link to a list of pages:

<ul>
<?
$url = get_bloginfo('url');
echo "<li class=\"page_item\"><a href=\"".$url."\">Home</a></li>\n";
wp_list_pages("title_li="); ?>
</ul>

Personally I don't like having "home" links on the home page itself: at best it's a waste of space and at worst, it's just confusing. So add an extra couple of lines so the link doesn't show up on the home page:

<ul>
<?
if (!is_home()){
$url = get_bloginfo('url');
echo "<li class=\"page_item\"><a href=\"".$url."\">Home</a></li>\n";
}
wp_list_pages("title_li="); ?>
</ul>

if (!is_home()) means "if this is not the home page" - the exclamation mark means "not".

page_item is the CSS class WordPress automatically adds when using wp_list_pages. For wp_list_categories, it adds cat_item. It's worth adding these to manual links too: you're probably going to need them in your CSS, and even if you don't immediately, it might just save you on weird spacing or styling issues later on.

Share this post:
  • email
  • del.icio.us
  • Facebook
  • FriendFeed
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Twitter

Tags: , ,

Posted by Sue on June 9, 2009 in WordPress.

One comment to "Adding links to WordPress navigation lists"

  1. Simple when you know how! Thanks for this. I've been looking for how to do this, knowing I've seen it in some themes, but without going through all the files I have or downloading themes I don't necessarily need, I wasn't sure how to find the snippet I wanted.

    I think I'll subscribe!

Leave a Reply