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>
<ul>
<li>
<a href="http://mysite.com/" title="Home">Home</a>
</li>
<li>
<a href="http://mysite.com/about" title="About">About</a>
<ul class="children">
<li>
<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:

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

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

<div>
<ul>
<li>
<a href="http://mysite.com/" title="Home">Home</a>
</li>
<li>
<a href="http://mysite.com/about" title="About">About</a>
<ul class="children">
<li>
<a href="http://mysite.com/about/contact-us" title="Contact us">Contact us</a>
</li>
</ul>
</li>
</ul>
</div>

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

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 ))
);

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.

The above is the detailed content of How to Tidy Your WordPress Menu HTML. For more information, please follow other related articles on the PHP Chinese website!