Beast-Blog.com
Building a Dynamic WordPress Nav Menu

More and more people are using WordPress as a Content Management System (CMS), and for good reason. It’s well supported, produces good mark-up, and it’s flexible. But when using it as a CMS it suddenly becomes very important to optimize the support of WordPress “Pages.” Unlike post, archive, and category links, a web site’s “Pages” have the utmost importance. This article will teach you how to produce a dynamic WordPress “Pages” navigation menu that looks good and behaves as a main navigation menu should.

To Begin With…

The first thing to consider is placement. For a vertical menu I would suggest placing the code I will supply in the sidebar.php file under the “sidebar” div if you have one. And if you’re going for a horizontally-displayed navigation menu I suggest adding the code in the header.php file underneath your main <h1> heading.

The Markup

Here’s the mark-up you will want to place in your file of choice.

 <!--See Note 1-->
 <ul id="nav">
 <!--See Note 2-->
  <?php if(is_home() && !is_paged()){ ?>
   <li class="current_page_item">
    <a href="<?php echo get_settings('home'); ?>" title="You are Home">Blog Navigation</a>
   </li>
 <?php } else { ?>
  <li>
   <a href="<?php echo get_settings('home'); ?>" title="Click for Home">Blog Home</a>
  </li>
 <?php } ?>
 <!--See Note 3-->
 <?php  wp_list_pages('sort_column=menu_order&title_li='); ?>
 <!--See Note 4-->
  <li>
   <a class="rss" rel="alternate" href="<?php bloginfo('rss2_url'); ?>" title="Really Simply Syndication">RSS Feed</a>
  </li>
 </ul>

Markup Notes

Now to explain what’s what in the script above.

Note 1

I first identify the menu with a “nav” ID. This isn’t needed for styling since WordPress generates the list-item classes in its core, but I’m using it anyway as it serves two purposes. The “page_item” class doesn’t really need to be there. Go with it; editing core files isn’t advisable as it’ll impede upgrading WordPress. The main reason I offer this is to use #nav as a fragment identifier so as to use it as a bookmark link target for a “Jump to Navigation” link: <a href="#nav">Jump to Navigation</a> (Code 1)

Note 2

This is a bit of page negotiation since I want the menu to have a home page link — something not provided on the page list by default. When you’re on the index this will say “Blog Navigation” and be styled as a current page link, but if you’re on any other page, including a “paged” home (when you view older posts via a page turner link), the link will say “Blog Home” instead and will look clickable instead of like the “current page” style. (Code 2)

Note 3

This is the meat and potatoes so to speak. This is the code for the dynamic menu produced by the WordPress core. This will produce page links in list item tags: <li>. Each will bear the “page_item” class except the current page where it’ll also bear the “current_page_item” class. I use only the latter. This conditional tag has two parameters in the function:

1. sort_column=menu_order — This allows you to use the page ordering feature built into WordPress. This ensures you can put your page links in an order you deem logical.
2. title_li= — This parameter can contain data such as <h2>Heading</h2>. If it is removed, the word “Pages” will display between the dynamic links and the home page link. If the <h2> heading elements are left blank the word “Pages” will display in the same spot. This would be okay if there was no home page link but that’s not the case, so I give the whole parameter a null value. I could give it a “0” (zero) I suppose. (Code 3)

Note 4

This last link is optional. Use it if your want a prominent link to your Really Simple Syndication or RSS feed. I give this link a special “rss” class so I can give it a unique background image in the style sheet. I add it to the “ul#nav” selector in the style sheet so the same attributes and properties are applied. I then give it a background image in a new CSS block — I’ll show you what I mean next. (Code 4)

Styling the List

What follows are some styles for your Cascading Style Sheet (CSS). These styles will produce block-level links in the vertical format. You can modify these styles to get your desired look, add backgrounds, change colors, anything you wish. To make it a horizontal menu you’ll want to float it left (right reverses the order so you’ll have to modify the scripting and markup) and list items will need the display property, “inline.” You can also give the unordered list a width and center it with margin-auto. You will also want to center-align the text, probably…

Nonetheless, this will offer you a simple copy and paste beginning. (All of this should be put in a container div of 200 pixels with 10 pixels of padding unless you decide to modify dimension and/or units, or you’re doing the horizontal thing.)

 /* This styles the unordered list element to remove bullets and align the text */
 ul#nav {
   list-style-type : none;
   text-align : right;
 }

 /*
  This styles the links. It’s a block-level link and the text is positioned
  with padding. Other styles are defined: width, colors, text attributes, etc.
 */
 ul#nav a, ul#nav a.rss {
   background-color : #d3d3a7;
   padding : 15px 5px 2px 10px;
   margin-bottom : 10px;
   width : 180px;
   height : auto;
   color : #333;
   font-weight : bold;
   font-style : normal;
   display : block;
   text-decoration : none;
 }

 /* This gives the “rss” class link a background image */
 ul#nav a.rss {
   background : #d3d3a7 url(images/rss.jpg) no-repeat 2px 2px;
 }

 /* This is only necessary for IE6 else the link margins will collapse on hover */
 ul#nav li {
   margin-bottom : 10px;
 }

 /* This removes the default left margin (indentation) */
 ul#nav li {
   margin-left : 0;
 }

 /*
  Now to offer some hover and focus styles. Further specification of focus/active styles
  could be added but I didn’t do it in this example. I didn’t feel it was needed
 */
 ul#nav a:hover, ul#nav a:focus, ul#nav a:active {
   background-color : #669900;
   color : #fff;
 }

 /* This offers up a hover/focus state image for the “rss” class link */
 ul#nav a.rss:hover, ul#nav a.rss:focus {
   background : #669900 url(images/rss_on.jpg) no-repeat 2px 2px;
 }

 /*
  This style the single state of the “current_page_item” class link. Not needed for
  the “rss” class link since that target page won’t display the menu
 */
 ul#nav li.current_page_item a, ul#nav li.current_page_item a:hover,
 ul#nav li.current_page_item a:focus, ul#nav li.current_page_item a:active {
   background-color : #9e9e55;
   color : #fff;
   cursor : default;
   text-align : left;
 }

Miscellaneous

Here’s some general info.

• You could add to the style info above to support child pages, or sub-pages, but the CSS I provided doesn’t support that link type in a special way — the subpage links and the current page link will both be marked the same way.
• You could also modify the script part of this menu if you had a static home page. Please note, however, that I’m not sure if a modification is needed to tell the truth. I haven’t tried it in such an application. You tell me.
• What I have on this site is custom made because I currently have several non-WordPress pages. Thus, if you want to see an example of this menu, please check out the sidebar on my BeastBlog v.2.0 theme support blog, but please know that it is slightly different than what I’m offering here. I added a “btn” class in addition to the “nav” ID. Doing it this way allows advanced theme users — since the theme is publically available — the ability to easily give additional menus the same styling via the “btn” class (because IDs must be unique on any given page while classes can be used repeatedly).
• In my example, when on the home page, I offer a link. This doesn’t have to be the case. A heading in a list item could be styled, plain text could be offered, what ever you want. I chose to do this instead. Laziness.

Filed under All Things PHP, Do It CSS Style, WordPressing —

Bookmarking Links » del.icio.us | Digg | blogmarks | StumbleUpon | Technorati |

These posts may be related:

Making the WordPress Menu Smarter »

Accessible SeaBeast Theme for WordPress »

The Best of the Beast in 2007 »