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 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 a€onavigationa€¯ or use the html5 nav element.
- We don't need a title attribute when our link contains identical text.
- The a€ochildrena€¯ class for the sub-links list isn't necessary - we can style them using a selector such as a€onav 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 a€oopena€¯.
- Similarly, I want rename current_page_item to a€oactivea€¯.
- 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 a€owp_nav_menu(a€¦)a€¯ line with:"
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 a€ochildrena€¯ or a€opage_itema€¯.
There's no excuse now - go and tidy your WordPress html!
Truncated by Planet PHP, read more at the original (another 608 bytes)