Digging into WordPress » HTML

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

Blogging in Markdown

Chris Coyier — Mon, 14 Jun 2010 14:50:58 +0000

WordPress defaults to a WYSIWYG editor when composing a new Post. Of course WYSIWYG is a bit of a misnomer. What you “get” when you publish that post is dependent on the template and the CSS in place in the theme. In fact, WordPress doesn’t even call it WYSIWYG, they call it the “Visual” editor. In fact, most editors of this nature these days go to length in telling you its a markup editor, not a WYSIWYG editor.

The point of the Visual editor is that it likely makes more sense to the “average” user. When they highlight a word and click the [b] button, the word literally turns bold, not gets wrapped in tags. If they insert a picture, they see it. If they insert a link, it looks like a link.

The Visual editor is perfectly fine, but the nerdier among us likely prefer the HTML view so they can see exactly what is going on. After all, the Visual editor has had a history of not being super hot when it comes to leaving our nicely organized HTML alone (when switching back and forth).

You can turn off the visual editor from your User Preferences.

Once that is off, we are free to compose posts in HTML. But that’s not our only option. We could also compose in Markdown!

What is Markdown?

Markdown is a special syntax for composing. It was originally conceived by John Gruber and you can learn more about it here.

Getting it into WordPress

Markdown was originally written in Perl. It was converted to PHP by Michel Fortin and comes with a WordPress plugin. You can get it here, which also has instructions for installing and activating it.

Why Markdown?

The idea is that it makes looking at the writing much more readable than HTML would be.

While Markdown’s syntax has been influenced by several existing text-to-HTML filters, the single biggest source of inspiration for Markdown’s syntax is the format of plain text email.

It does look quite a bit like a text email.

Markdown Syntax

There isn’t all that much to it, but you might want to check out the actual documentation page instead of me rehashing it here.

In a nutshell:

*italic*
**bold**
[link text](http://example.com)
## header 2
### header 3
code is indented

Is it for you?

Whether or not this looks appealing to you is simply a matter of taste. Do keep in mind that Markdown is compatible with HTML. So if you have articles you have previously written in HTML, those will be fine with this activated. However, the opposite is not true. If you create a bunch of content in Markdown and then decide to turn it off, you will be looking at asterisks and octothorpes and such.

One other concern would theoretically be shortcodes. Short codes also use the [foo] syntax, so I’m actually not sure which one would take precedence. Definitely should be tested if you are a heavy shortcodes user.

Look Ma, Editable Text Regions

Chris Coyier — Thu, 03 Sep 2009 15:06:53 +0000

WordPress is a CMS. The whole idea being to manage content and make websites editable without having to wrangle code. Any theme can handle Posts and Pages, but what about those “smaller” areas. Little chunks of text placed around a design like a small “about” section, or the copy in the footer of a website. A lot of times this text is hard-baked right into the theme, which isn’t a very friendly way to do things, as it can’t be updated by average Joe user.

Widgetize!

If you are looking to add text to your sidebar, and your sidebar is already widgetized, this becomes trivially easy. In your Admin, go to Appearance > Widgets and drag the “text” widget into the your sidebar area on the right. You can then open up that widget and give it a title and text and save it.

Adding Multiple Regions

There is a good chance that if your theme is widgetized, the only widgetable area is the sidebar. But you are by no means limited to having only one widgetized area. In order to add another, open your functions.php file and add another chunk of code like this:

if ( function_exists('register_sidebar') ) {
   register_sidebar(array(
       'name'=>'Footer Widgets',
       'before_widget' => '',
       'after_widget' => '',
       'before_title' => '',
       'after_title' => '',
   ));
}

The ‘name’ part is important, because we’ll be referencing that in a sec when we drop in the widgetization code. Most of the rest of this should be pretty self-explanatory. You provide the HTML code for what wraps the text you provide for a title and body of the widget. Those weird characters as part of the ID and class actually provide some nice useful hooks for each widget. The ID is literally a unique ID for the widget, and the classes designate the type of widget being used. The end result markup for a simple text widget will be something like this:


   
       Â©2009 Digging into WordPress

As you may have gathered, we are making an editable region in our footer to house the copyright information. In our footer.php file, we’ll drop in this code in an appropriate place to widgetize the area:

All goes well, we now have a new widget area showing up in our Admin, in which to drag in widgets. Drag in a text widget, and you should be all set. It should be noted that while text widgets have a title and text area, you don’t have to use both, you can use one or the other if you want.

Fairly basic stuff, but this is great stuff for allowing users to be in more complete command of their sites!

Free HTML 5 WordPress Theme

Jeff Starr — Wed, 01 Jul 2009 07:19:43 +0000

In an effort to inspire more WordPress theme designers to embrace HTML 5, I am releasing the “H5” Theme Template. The H5 Theme Template is a bare-bones WordPress theme built entirely with HTML 5 and styled with CSS 2.1. As you may know, HTML 5 provides greater flexibility and interoperability than previous markup languages, and enables us to build well-structured themes that are more flexible, interactive, and semantically precise.

About the ‘H5’ WordPress Theme Template

The H5 Theme Template provides everything you need to create beautiful themes with HTML 5 right now. H5 contains a complete set of theme files and folders, and each file has been meticulously crafted with all of the latest and greatest WordPress functionality. As a template theme, H5 is designed with easy customization and personalization in mind, serving as a solid starting point for your next HTML-5-based theme.

Unlike other frameworks, H5 works great as a basic theme right out of the box. Of course, this is a template theme we’re talking about here, so you will inevitably feel “inspired” to begin tweaking and styling its minimalistic appearance to get the design looking exactly how you want it. And that is entirely the point: H5 makes it quick and easy to begin designing themes with HTML 5. And best of all, H5 is completely free. Sound good? Great, let’s dig into the specifics..

‘H5’ Specifications

First, thanks for your interest in the H5 Theme Template. I am very excited to be sharing this theme with the WordPress community and hope that you will put it to good use. Next, three important points that I would like to emphasize:

H5 is completely free and licensed under GPL
H5 is a template used to build HTML-5 themes
H5 is built entirely with WordPress, HTML 5, and CSS 2.1

About the markup

Uses as few tags and attributes as possible
Contains no
s, s, classes, or ids!
Built with semantically sound and fully valid HTML 5
Outputs clean, well-formatted source-code (although WordPress botches most of it)

About the CSS

Just enough CSS to target key elements, provide some structure, and make it “look” like a basic theme
Built with well-formatted and fully valid CSS 2.1 (current spec)
Uses child, adjacent, and attribute selectors to target elements without ids or classes

About the JavaScript

Uses only unobtrusive JavaScript
Uses createElement() to specify block elements for Internet Explorer
Includes WordPress’ jQuery script the right way

About the design

Includes minimal markup and styles for easy customization
Features a full set of theme template files and common folders
Very minimal, meant to do just the basics and serve as a starting point
Uses default and/or standard WordPress template tags, loops, and other functions
Looks and works great out of the box in (almost) all modern browsers (see next section)
Designed to be as lightweight and fast as possible — only essential tags are included

Browser compatibility

H5 looks and works great in the following browsers (and most likely others as well):

Firefox 3
Opera 8*
Opera 9
Chrome 1 & 2
Safari 2, 3, & 4
Internet Explorer 7*
Internet Explorer 8

* Denotes slight inconsistencies in these browsers.

For Firefox 2, Camino 1.6, and IE 6, the HTML seems to work great, it’s just some of the “advanced” CSS selectors that some browsers don’t understand. This is easily handled by simply adding a few choice id or class attributes to key elements (none are used by default).

Download and Demo

For a “live” demo of the H5 Template Theme, check out our newly revamped DiW Theme Playground, where we will be hosting any themes that we release here at Digging into WordPress.

At the DiW Theme Playground you will find a dropdown menu at the top of the browser window that enables you to preview any of our themes, as well as a download link for whichever theme happens to be active (Chris’ excellent WP Typo is the default active theme).