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
divisn’t required. I’d prefer either to give the
ulan ID such as “navigation” or use the HTML5
- We don’t need a title attribute when our link contains identical text.
- 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!
Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.