Blogging Tips

Static Page Navigation

A new template tag was introduced for WordPress 2.7 to provide different functionality for generating your page navigation. For earlier versions, and still for WordPress 2.7, we have wp_list_pages(), however for 2.7 we now have wp_page_menu().

This function simplifies some of the aspects of generating a list of static pages. The parameters that it takes in are:

sort_column: Sorts the pages into the specified order. Values can be post_title, menu_order, post_date, post_modified, ID, post_author, post_name (sorts by the slug)
menu_class: Specifies the class given to the div that is output around the menu
echo: Accepts 0 or 1 to control whether the menu is output or returned for use within your PHP. 1 means output, 0 means don’t
show_home: Accepts 0 or 1 to create a Home link. 1 means create the link, 0 means don’t
link_before: Sets the text or HTML that preceeds the anchor text
link_after: Sets the text or HTML that follows the anchor text

A simple usage of this would then be:

<?php wp_page_menu('sort_column=menu_order&menu_class=nav&show_home=1&echo=1'); ?>

This would then give us:

<div class="nav">
    <ul>
        <li class="current_page_item"><a href="http://www.bloggingtips.com/" title="Blogging Tips">Home</a></li>
        <li class="page_item page_item_3"><a href="http://www.bloggingtips.com/forums/">Forums</a></li>
        <li class="page_item page_item_8"><a href="http://www.bloggingtips.com/forums/local_links.php">Directory</a></li>
	<li class="page_item page_item_7"><a href="http://www.bloggingtips.com/themes/">Themes</a></li>
    </ul>
</div>

To achieve the same output using the old wp_list_pages() function would require:

<div class="nav">
    <ul>
        <li <?php if (is_front_page()) echo 'class="current_page_item"' ?>><a href="<?php bloginfo('url') ?>">Home</a></li>
        < ?php wp_list_pages('sort_column=menu_order&title_li='); ?>
    </ul>
</div>

As you can see, there’s a lot more code involved to generate the same output.

Of course, for theme developers you’ll want to ensure that your themes work for 2.7 and older versions. To combat this you can either just stick with the old method or simply use function_exists() to check if the new template tag exists before using it eg.

< ?php
if (function_exists(wp_page_menu)) :
    wp_page_menu('sort_column=menu_order&menu_class=nav&show_home=1&echo=1');
else :
?>
<div class="nav">
    <ul>
        <li <?php if (is_front_page()) echo 'class="current_page_item"' ?>><a href="<?php bloginfo('url') ?>">Home</a></li>
        < ?php wp_list_pages('sort_column=menu_order&title_li='); ?>
    </ul>
</div>
< ?php endif; ?>

So as you can see, this new tag reduces code even more in your theme, which is always a bonus

Written by Sarah from Stuff By Sarah
Posted on December 28th, 2008 and filed under WordPress Coding & Design
Do not forget to subscribe to our RSS feed for updates

11 Responses to “Static Page Navigation”

Author comments are in a darker gray color for you to easily identify the posts author in the comments

Blog Expert says:

December 28, 2008 at 12:15 pm

Awesome tutorial. You guys have had plenty of these tutorials but I am absolutely loving them.
love bebo skins says:

December 28, 2008 at 5:51 pm

thanks cool tutorial. was easy enough to follow
Tobias Fransson says:

December 29, 2008 at 5:31 am

Nice, not sure that I will use it though but I love it when you get added flexibility and easy to use extra functions.
Sarah says:

December 29, 2008 at 6:09 am

Glad you liked the post. Personally I think I’ll start changing custom designs to use this code as it’s simply less code which is always a good thing
Dan Schulz says:

December 29, 2008 at 8:18 am

Sarah, is it possible to remove that stupid pointless and annoying DIV tag from around the list menu? My god, it’s almost 2009 – you’d think by now that people (I’m looking squarely at the WordPress developers here) would know that a list is a block-level element and as such does not need a DIV around it!
Agnus says:

December 30, 2008 at 2:35 am

As this involves lot of coding it takes some time to understand..But i always like to implement new updates in the site navigation which is my interest..
Sarah says:

January 2, 2009 at 6:14 am

@Dan I’ve not looked into it yet, although I would imagine you could with an action as you can manipulate the old template tag in that way. I agree it’s a bit daft to have the div around it. At first I thought/hoped the class name would go into the actual ul tag, which would obviously make more sense.

I’ll try and write a function for it to go into the functions.php file and post it up here, which will put the class into the ul and remove the div completely. Actually, I’ll use that as the basis for Sunday’s post
Sarah says:

January 2, 2009 at 10:34 am

I tried out an additional parameter that isn’t documented on the Codex, which is depth. This works in the same way as in wp_list_pages, so to just get parent pages listed, use depth=1.