News Archive
PhpRiot Newsletter
Your Email Address:

More information

How to Tidy Your WordPress Menu html

Note: This article was originally published at Planet PHP on 26 January 2011.
Planet PHP

I love WordPress. I also love clean semantic html. Unfortunately, several of the standard WordPress theme functions return code which 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.

2)); ?

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

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 aonavigationa 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 aopage_itema and aopage-item-Na classes?
  • The aochildrena class for the sub-links list isn't necessary - we can style them using a selector such as aonav ul ul lia.
  • The current_page_ancestor and current_page_parent classes mean the same thing, but I'd prefer a single shorter name such as aoopena.
  • Similarly, I want rename current_page_item to aoactivea.
  • 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_item\s*/i', '/current_page_ancestor\s*/i', '/current_page_parent\s*/i', '/page_item\s+/i', '/page-item-\d+\s*/i', '/children\s*/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 aowp_nav_menu(a)a line with:

    \n" . wp_list_pages('depth=2&title_li=&sort_column=menu_order&echo=0') . "

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

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 aochildrena or aopage_itema.

There's no excuse now - go and tidy your WordPress html!


Truncated by Planet PHP, read more at the original (another 608 bytes)