Jaffe

Who am I?

find me jaff.es / @jaffe75

Microsoft Open Technologies

Bridging the gap between Microsoft Technologies and the Open Source community

WebCamps TV

Co-Host

Web Camps TV gets you closer to the Microsoft Web Platform with exclusive interviews and demos from the guys that make it easy for you to create rock star web applications

Couple 4 plugins

Movember!!

Men's Health Awareness Month

MustacheDash

The Walker Class

What is it, and why should I give s#!t?

Per the Codex

The Walker class was implemented in WordPress 2.1 to provide developers with a means to traverse tree-like data structures for the purpose of rendering HTML.

But Jaffe, you say, What are some examples of this Walker Class?

• Navigational Menus
• Page Categories
• Breadcrumbs

So... huh?

We're mostly going to focus on Navigation Menu's, but...

Let's start walking..

see what I did there?..

function walk ($elements, $max_depth)

We start with the walk method, this is the method that actually returns the HTML once it has been created. It takes two arguments..

• $elements - a list of elements that we want to show - these will have some kind of Parent/Child relationship.
• $max_depth – sets how far down we go in the tree..

• There is actually a 3rd method called $args where you can pass extra arguments, that make an array, that you can pass into other methods in the class... But I digress

Display_Element

This function is responsible for displaying an element in the tree

function display_element($element, &$children_elements, $max_depth, $depth=0,   $args &$output){}

It calls it's own functions in order to do this

(these are left blank in the walker class)

• start_lvl - this returns the HTML for the start of a new level.
• end_lvl - this is called once we have finished a level.
• start_el - this displays the current element we are on.
• end_el - this is called after all of an element's children have been displayed

What does display_element actually do though?

let's go over each thingy-ma-jigger

• $element - this is the element we are currently on
• $children_elements - an array (or list) of all child elements.. and I mean.. ALLLLLLLLLLLLLLLLLL infinity... +2
• $max_depth - how far down can we go?
• $depth - how far down are we
• $args - optional arguments (just like mom and dad used to make)
• $output - The HTML we currently have, and the option to add more.

Let's go over the start and end methods.. shall we?

I will be showing code that is used in Walker_Nav_Menu

This is called a segue...

start_lvl

function start_lvl(&$output, $depth=0, $args=array())

This is the start of the sub-level items

Most commonly wrapped in a <ul> tag for navigation purposes

function start_lvl( &$output, $depth = 0, $args = array() ) {
	$indent = str_repeat("\t", $depth);
	$output .= '\n$indent<ul class="sub-menu">\n';
}

end_lvl

function end_lvl(&$output, $depth=0, $args=array())

This is the end of the sub-level items

Most commonly uses the </ul> tag for navigation purposes

function end_lvl(&$output, $depth=0, array()){
	$indent = str_repeat("\t", $depth);
	$output .= "$indent</ul>\n";
}

start_el

function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 )

This is the start of the element wrapper -

most commonly a <li> tag

Whoa!!! slow down there.. WTF is all that crap?!!

(WTF = Why The Feelings?), so many feelings...

function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
	$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

	$class_names = $value = '';

	$classes = empty( $item->classes ) ? array() : (array) $item->classes;
	$classes[] = 'menu-item-' . $item->ID;

	$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
	$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

	$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
	$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

	$output .= $indent . '<li' . $id . $value . $class_names .'>';

	$atts = array();
	$atts['title']  = ! empty( $item->attr_title ) ? $item->attr_title : '';
	$atts['target'] = ! empty( $item->target )     ? $item->target     : '';
	$atts['rel']    = ! empty( $item->xfn )        ? $item->xfn        : '';
	$atts['href']   = ! empty( $item->url )        ? $item->url        : '';

	$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args );

	$attributes = '';
	foreach ( $atts as $attr => $value ) {
		if ( ! empty( $value ) ) {
			$value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
			$attributes .= ' ' . $attr . '="' . $value . '"';
		}
	}

	$item_output = $args->before;
	$item_output .= '<a'. $attributes .'>';
	/** This filter is documented in wp-includes/post-template.php */
	$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
	$item_output .= '</a>';
	$item_output .= $args->after;

What do you think?

ugly cats says SLOW DOWN...

Bit by bit... one way or another..

This just indents our code so it looks pretty when viewing source..

$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

creating 2 variables, setting the classes...

$class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = 'menu-item-' . $item->ID;

The CSS applied to to a menu's item in this case <li>

$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

The ID that is applied to the <li>

$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

And we do a little outputting ... notice the $indent variable.. huh?

$output .= $indent . '<li' . $id . $value . $class_names .'>';

Checking to see if the attributes have content, if not then...

$atts = array();
$atts['title']  = ! empty( $item->attr_title ) ? $item->attr_title : '';
$atts['target'] = ! empty( $item->target )     ? $item->target     : '';
$atts['rel']    = ! empty( $item->xfn )        ? $item->xfn        : '';
$atts['href']   = ! empty( $item->url )        ? $item->url        : '';

Filtering through the attributes for the <a> tag

$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args );
$attributes = '';
foreach ( $atts as $attr => $value ) {
if ( ! empty( $value ) ) {
	$value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
	$attributes .= ' ' . $attr . '="' . $value . '"';
}
}

Outputing our arguments and attributes before, middle, and after..

$item_output = $args->before;
$item_output .= '<a'. $attributes="" .'="">';
/** This filter is documented in wp-includes/post-template.php */
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= '';
$item_output .= $args->after;</a'.>

and finally

$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item,      $depth, $args );

end_el

function end_el( &$output, $item, $depth = 0, $args = array() )

we close out the <li> tag

function end_el( &$output, $args = array() ){
$output .= "</li>\n";
}

Neat.. now what?

awe - who's a tanglepuss..

Maybe we can see this in practical use?

Foundation_s

insert large amounts of fanfair here

Jaffe, you say.. what ever is this Foundation_s??

Foundation_s is a starter theme that is being created by combining Foundation by Zurb and _s by Automattic*

So let's check it out...

Another live example of this being used

msopentech.com

This is actually what made me decide to put this as a base class in foundation_s