Digging into WordPress » XHTML

HTML Formatting for Custom Menus

Jeff Starr — Mon, 28 Nov 2011 18:09:42 +0000

For some projects, it’s nice to output clean, well-formatted markup. Using theme template files enables great control over most of your (X)HTML formatting, but not so much for automated functionality involving stuff like widgets and custom menus. One of my current projects requires clean, semantic HTML markup for all web pages, but also takes advantage of WordPress’ custom-menu functionality to make things easy. In this DiW article, we’ll see how to enjoy both: WordPress custom menus and clean, well-formatted HTML markup.

Customizing HTML displayed with wp_nav_menu()

By default, WordPress custom menus are displayed in your theme template using the wp_nav_menu function, which by default outputs markup that looks like this:

Home
Demos
Downloads
Documentation

That’s a mess of class and id attributes, plus an extra

container to boot. Fortunately, the wp_nav_menu() provides some useful parameters for customizing the display of your custom navigation menus. Here is a list of the default parameters:

 ,
  'menu'            => , 
  'container'       => 'div', 
  'container_class' => 'menu-{menu slug}-container', 
  'container_id'    => ,
  'menu_class'      => 'menu', 
  'menu_id'         => ,
  'echo'            => true,
  'fallback_cb'     => 'wp_page_menu',
  'before'          => ,
  'after'           => ,
  'link_before'     => ,
  'link_after'      => ,
  'items_wrap'      => '%3$s',
  'depth'           => 0,
  'walker'          => );
?>

Of these parameters, $container lets you specify how to wrap the

'div'

'nav'

false

$container

container. The wp_nav_menu function also provides two more optional parameters for customizing menu markup:

$items_wrap – “Whatever to wrap the items with an ul, and how to wrap them with” (source: WP Codex)
$walker – “Custom walker object to use (Note: You must pass an actual object to use, not a string)” (source: WP Codex)

These sound useful, but I haven’t had much luck with either. The $items_wrap didn’t seem to do anything, but there are plenty of custom walker scripts available for further experimentation and customization. If you can get them to work properly, a custom walker provides complete control over custom-menu markup displayed with the wp_nav_menu tag. Unfortunately, I was unable to get very far with any of them, so I sought an alternate method..

An alternative approach for custom markup

After fiddling with a few of the various custom walkers, I decided to find an easier way to customize and format WordPress nav/menu markup. The walkers are fairly extensive and complex, and just seem like overkill for building a simple list of custom menu items. After some digging through the WordPress Codex, I found the perfect function for crafting squeaky-clean WordPress menus: wp_get_nav_menu_items. As the name implies, wp_get_nav_menu_items returns the items from your custom navigation menus (as created in the WP Admin → Appearance → Menus panel). Thus, you can use this function to mark up your custom menus however you want. For my particular project, the desired format looks like this:


	
		Home
		Demos
		Downloads
		Documentation

Trying to do this with the commonly used wp_nav_menu function and a custom walker is possible, but it’s much easier building the menu structure from scratch, using only what’s required to make it happen. So alternately we use wp_get_nav_menu_items and begin with the example function provided at the Codex. After wrapping it in a function and customizing the output, we have the clean_custom_menus() function, ready for copy/paste into your theme’s functions.php file:

// custom menu example @ http://digwp.com/2011/11/html-formatting-custom-menus/
function clean_custom_menus() {
	$menu_name = 'nav-primary'; // specify custom menu slug
	if (($locations = get_nav_menu_locations()) && isset($locations[$menu_name])) {
		$menu = wp_get_nav_menu_object($locations[$menu_name]);
		$menu_items = wp_get_nav_menu_items($menu->term_id);

		$menu_list = '' ."\n";
		$menu_list .= "\t\t\t\t". '' ."\n";
		foreach ((array) $menu_items as $key => $menu_item) {
			$title = $menu_item->title;
			$url = $menu_item->url;
			$menu_list .= "\t\t\t\t\t". ''. $title .'' ."\n";
		}
		$menu_list .= "\t\t\t\t". '' ."\n";
		$menu_list .= "\t\t\t". '' ."\n";
	} else {
		// $menu_list = '';
	}
	echo $menu_list;
}

After placing in your functions.php file, you can call the function and display your custom menus anywhere in your theme by calling it directly:

Then, you can customize the clean_custom_menus() function as follows:

Line 3: specify your custom-menu slug
Lines 8 thru 15: customize markup, tabs, and line breaks as needed
Line 17: uncomment else condition and customize if needed

For lines 8-15, anything is possible – you can include whatever list items, markup, and attributes required. Additionally, you can tab and indent markup to line up with page markup using \n for a new line and \t for a tab space. The fastest, easiest way to use this function is to copy/paste into your theme and then check out your list markup. For example, if the nav list is too far to the left, add some more tabs. You can also add class and id attributes, include custom items, and even manipulate which list items are displayed ($url, $title, etc.). After a little fine-tuning, the wp_get_nav_menu_items() function enables clean, well-formatted markup for your custom menus.

Quick Summary

In this article, we explain two ways to clean up and customize WordPress’ custom-menu markup. Either of these methods will take your code from this:

Home
Demos
Downloads
Documentation

..to this:


	
		Home
		Demos
		Downloads
		Documentation

..or whatever HTML structure that’s required. You can achieve this with either of these methods:

Combine wp_nav_menu() with a custom walker class
Combine wp_get_nav_menu_items() with the clean_custom_menus() function

As usual, if you know of better ways of doing something, please share in the comments! Thanks for reading Digging into WordPress :)

Poll: HTML or XHTML for Markup?

Jeff Starr — Fri, 30 Apr 2010 16:38:31 +0000

HTML5 is rapidly gaining popularity, but how many people are actually using it? If not HTML5, then what? When creating websites, designers have a variety of options for markup:

HTML5 (Not quiite official yet)
HTML 4.01 (Strict, Transitional, Frameset)
XHTML 1.0 (Strict, Transitional, Frameset, & Basic)
XHTML 1.1 (+ Basic XHTML 1.1)

You can build beautiful websites using any of these languages, but each comes with its own pros and cons. For example, you get some great new features with HTML5, but JavaScript is required to ensure cross-browser compatibility. XHTML 1.0 is cool, but Internet Explorer doesn’t really get it. Likewise, XHTML 1.1 is clean and flexible, but a little more persnickety about the details. And whatever happened to XHTML 2?

In a cage match, which markup language would dominate? Cast your vote!

Note: There is a poll embedded within this post, please visit the site to participate in this post's poll.

Bonus question: How many of us will be around for HTML6? ;)

Note: If you are reading via feed, visit the DiW site to take the poll (located in the sidebar).

Clean Up Empty Elements with CSS 3

Jeff Starr — Thu, 01 Oct 2009 13:07:38 +0000

By default, WordPress wraps HTML comments with paragraph tags:

WordPress also employs various template tags that may, in certain situations, result in empty HTML elements such as paragraphs tags:

Other cases where empty elements are generated by WordPress involve images, line breaks, nested lists and other complex markup scenarios.

Besides invalid markup, the problem with this is that your CSS may be applying styles to the empty elements, potentially breaking your layout or disrupting the presentational harmony of your design.

For specifically targeted elements, such as paragraph elements for navigational template tags, dealing with this issue is as simple as this:

#nav {
	display: none;
	}

Either that or you could get all “Google-homepage” and use nothing but style-neutral spans and divs to markup your content. Unfortunately neither of these solutions is effective at alleviating the occasional, unpredictable WordPress-generated empty paragraph elements.

Fortunately, the new :empty pseudo-selector of CSS 3 is the perfect solution for neutralizing all empty HTML elements. Here are some examples..

To neutralize all empty paragraphs (and only empty paragraphs), throw down the following slice of CSS goodness:

p:empty {
	display: none;
	}

Or, to cover your bases and hide all empty elements, add this bad boy to your stylesheet and enjoy complete satisfaction:

*:empty {
	display: none;
	}

In my opinion, this declaration should be included in all CSS reset stylesheets, but I will leave that decision up to you.

But..

Note that, for now, this technique only works in supportive browsers, which seems to be anything based on Mozilla. Unfortunately, Safari applies the rule to all elements of the specified element type. Hopefully this will be addressed in an upcoming version. And of course, Internet Explorer has absolutely no idea what we’re talking about here.