I’ve been working with WordPress for years now, and I thought it might be a good time to start sharing my knowledge of WordPress best practices.  One item that I think a lot of people just getting started using WordPress might find handy is how to build a navigation that is driven by pages.  Having a navigation driven by pages has numerous benefits, including having the nav written out as an XHTML compliant unordered list, being able to include or exclude any pages you’d like, being able to sort the list items to your preference, and being able to style the current page’s nav button differently.

Create those Pages

The first thing you need to do to setup a nav driven by pages is create the pages themselves.  The title you give the page will be the text that appears in the nav.  Also note that by default the nav items will be sorted alphabetically, but you can prioritize them setting the “Order” field from within each individual page.

The Magic of Template Tags

After you’ve created all the pages you’d like to include in the navigation, all that’s left to do is add the template tag to your template (usually in header.php).  The template tag that lists pages in WordPress is, you guessed it, wp_list_pages. Here’s a sample template tag included in my header.php file that passes a few parameters to the function:

<?php wp_list_pages('include=2,7,9,11&title_li='); ?>

The above block of code includes an opening php statement <?php, the function call wp_list_pages('');, and the arguments to be passed to the function include=2,7,9,11 and title_li=.

Let’s take a look at the two arguments I passed to the wp_list_pages function, starting with include=2,7,9,11.

This tells the function I’d like to include only pages with the id’s of 2, 7, 9 and 11. To find the page id’s that match your specific pages, go to your pages>edit screen and hover over the link for the title of the page, and (if you’re using Firefox) look at the bottom of your browser. At the end of the link you’ll see something like post=7. The number here is your page id. Plug in the page id’s for any pages you’d like to include, and you’re good to go!

The other argument I pass to the wp_list_pages function is to remove the title that would appear by default. By passing title_li= you’re essentially saying “set the title to blank”, and the function does not return a title list item. Generally you won’t want the title, which is up one level in the document tree, to appear if you’re making a navigation that you’ll end up floating to the left with CSS.

The ampersand between the two arguments just allows you to string together multiple arguments. You can string together as many as you’d like to further develop your own custom WordPress queries using any of the further options detailed on the WordPress.org wp_list_pages template tag page.

Check out the Coolness

The last, and probably most worthwhile thing about building your nav in WordPress using pages is that while navigating your site, the list will be auto-updated with a class that allows you to style the current page’s button to look different than the other nav buttons.  After you’ve got your nav set up and working, visit one of the pages and then view the page source.  You’ll see the class of current_page_item applied to the list item for the page you’re currently on, automatically generated by WordPress for each page.

Now just start styling your way to a dynamic WordPress page-driven navigation! If you need more info on the CSS required to float a list to the left that creates a horizontally oriented navigation out of an unordered list, check out this tutorial at 456 Berea St.

I hope this can help you to build your own navigation, and take it even further using the WordPress.org template tag page.