<?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 theul
an ID such as “navigation” or use the HTML5nav
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?
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
How can I add HTML to a WordPress menu?
Adding HTML to a WordPress menu can be done by using the ‘wp_nav_menu’ function. This function allows you to add custom HTML to your WordPress menu. You can add the HTML code directly into the function in your theme’s functions.php file. Remember to always back up your site before making any changes to the functions.php file.
What is HTML Tidy and how does it work with WordPress?
HTML Tidy is a tool that helps clean up and correct any issues in your HTML coding. It can be used with WordPress to ensure that your site’s HTML is clean and error-free. This can help improve your site’s performance and SEO.
How can I customize my WordPress menu using HTML?
Customizing your WordPress menu using HTML can be done by using the ‘wp_nav_menu’ function. You can add custom classes, IDs, and other HTML elements to your menu items. This allows you to style your menu in a unique way and make it stand out.
Can I use HTML Tidy on my existing WordPress site?
Yes, you can use HTML Tidy on your existing WordPress site. It can be used to clean up your site’s HTML and correct any errors. This can help improve your site’s performance and SEO.
How can I use HTML Tidy to improve my site’s SEO?
HTML Tidy can help improve your site’s SEO by cleaning up and correcting any errors in your site’s HTML. This can help improve your site’s performance, which is a factor that search engines consider when ranking sites.
Can I use HTML Tidy with other CMS platforms?
Yes, HTML Tidy can be used with other CMS platforms. It is a versatile tool that can be used to clean up and correct any errors in your site’s HTML, regardless of the platform you are using.
How can I add custom classes to my WordPress menu items?
You can add custom classes to your WordPress menu items by using the ‘wp_nav_menu’ function. This allows you to add custom classes to your menu items, which you can then style using CSS.
Can I use HTML Tidy to clean up my site’s CSS?
While HTML Tidy is primarily used for cleaning up HTML, it can also be used to clean up your site’s CSS. This can help improve your site’s performance and ensure that your CSS is error-free.
How can I use HTML Tidy to clean up my site’s HTML?
You can use HTML Tidy to clean up your site’s HTML by running your site’s HTML through the tool. It will identify any errors and suggest corrections. You can then implement these corrections to improve your site’s HTML.
Can I use HTML Tidy to clean up my site’s JavaScript?
While HTML Tidy is primarily used for cleaning up HTML, it can also be used to clean up your site’s JavaScript. This can help improve your site’s performance and ensure that your JavaScript is error-free.
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.