How to Tidy Your WordPress Menu HTML

I love WordPress. I also love clean semantic HTML. Unfortunately, several of the standard WordPress theme functions return code that is a little untidy. For me, the primary culprits are wp_list_pages() and the newer wp_nav_menu(); both return an unordered list of page links typically used for page menus and sitemaps, e.g.,

<?php wp_nav_menu(array( 'depth'=>2 )); ?>

The code results in this HTML abomination for the default installation’s home, about and contact pages:

<div class="menu">
<ul>
<li >
<a href="http://mysite.com/" title="Home">Home</a>
</li>
<li class="page_item page-item-2 current_page_ancestor current_page_parent">
<a href="http://mysite.com/about" title="About">About</a>
<ul class='children'>
<li class="page_item page-item-5 current_page_item">
<a href="http://mysite.com/about/contact-us" title="Contact us">Contact us</a>
</li>
</ul>
</li>
</ul>
</div>

The code is valid but it contains items we generally don’t need:

• Strictly speaking, the outer div isn’t required. I’d prefer either to give the ul an ID such as “navigation” or use the HTML5 nav element.
• We don’t need a title attribute when our link contains identical text.
• Does our CSS or JavaScript require hooks for “page_item” and “page-item-N” classes?
• The “children” class for the sub-links list isn’t necessary — we can style them using a selector such as “nav ul ul li.”
• The current_page_ancestor and current_page_parent classes mean the same thing, but I’d prefer a single shorter name such as “open.”
• Similarly, I want rename current_page_item to “active.”
• Do we require the full page URLs — we could use shorter absolute addresses such as /, /about and /contact?

There are several ways to tidy the HTML, but the simplest solution replaces strings using regular expressions. note: The WordPress 3 Walker object In WordPress 3.0, a custom Walker object can be passed as an argument to wp_nav_menu(). The object provides code to output your own custom HTML for every page link. While this will be useful in some circumstances, you’ll possibly require regexs for the outer HTML, the code won’t necessarily be shorter, and it won’t work in WordPress 2.x and below. Here’s the PHP code to output a tidier HTML menu to 2 levels (main menu and sub-menu). In most cases, it should replace the call to wp_nav_menu() or wp_list_pages() in your theme’s header.php file:

echo preg_replace(array(
    '/t/', // remove tabs
    '/'.str_replace('//','//', get_bloginfo('url')).'/i', // remove full URL
    '/current_page_items*/i',
    '/current_page_ancestors*/i',
    '/current_page_parents*/i',
    '/page_items+/i',
    '/page-item-d+s*/i',
    '/childrens*/i',
    '/s*class=["']["']/i', // empty classes
    '/s*title="[^"]+"/i', // all titles
    '/s+>/i',
    '/div>/i' // change div to nav
  ),
  array(
    '',
    '',
    'active',
    'open',
    '',
    '',
    '',
    '',
    '',
    '',
    '>',
    'nav>'
  ),
  wp_nav_menu(array( 'menu_class'=>'', 'depth'=>2, 'echo'=>false ))
);

If you’re using a version of WordPress prior to version 3, replace the penultimate “wp_nav_menu(…)” line with:

"<nav><ul>n"
  . wp_list_pages('depth=2&title_li=&sort_column=menu_order&echo=0')
  . "</ul></nav>"

Our resulting HTML is much cleaner and has been reduced by more than 50%. Longer menus may result in larger savings.

<nav>
<ul>
<li><a href="/">Home</a></li>
<li class="open">
<a href="/about">About</a>
<ul><li class="active"><a href="/about/contact-us">Contact us</a></li></ul>
</li>
</ul>
</nav>

Please note that regular expressions are powerful but dangerous. You may need to change the code if you’re using a deeper page depth or have a page named “children” or “page_item.” There’s no excuse now — go and tidy your WordPress HTML!

Frequently Asked Questions about WordPress Menu HTML Tidy