Adding a Data Attribute to a Menu List Item via the Walker Class

Here is how to add a Data Attribute to a Menu List Item via the Walker Menu Class. Some of the markup of  the WordPress menu is hard to filter or hook into, the Walker class allows for a full custom menu mark up.

One request I find is to add a data attribute to the list item itself, instead of the link tag <a> which can be accomplished using nav_menu_link_attributes , for the <li> item you will need to create a whole new menu using the Walker Menu Class.

Register and Position a New Menu

First up is to register a new menu and link it to an instance of the Walker Class

<?php
// Placement of new menu
add_action( 'genesis_before_loop', 'themprefix_walker_menu' );
/**
* Add in Walker Menu
*
* @package Genesis Walker Menu
* @author Neil Gee
* @link http://wpbeaches.com/adding-data-attribute-menu-list-item-via-walker-class/
* @copyright (c)2016, Neil Gee
*/
// New menu
function themprefix_walker_menu () {
$args = array(
'theme_location' => 'tertiary',
'container' => 'nav',
'container_class' => 'walker-menu-container',
'menu_class' => 'wrap menu genesis-nav-menu menu-tertiary',
'depth' => 0, //change to 1 for no submenu levels
'walker' => new WPB_Custom_Walker // calling in the custom walker menu as in theme inc/custom-walker.php
);
wp_nav_menu( $args );
}
// Genesis support for extra menu
add_theme_support ( 'genesis-menus' , array (
'primary' => 'Primary Navigation Menu' ,
'secondary' => 'Secondary Navigation Menu' ,
'tertiary' => 'Walker Navigation Menu'
)
);
// Bring in my custom walker class - filed in my themes inc/
require_once dirname( __FILE__ ) . '/inc/custom-walker.php';
view raw functions.php hosted with ❤ by GitHub

So in the above gist I am registering a new menu with wp_nav_menu with a theme location of tertiary, adding support for it with add_theme_support  as I am using Genesis and also positioning it before the loop with an action.

Notice in the $args for wp_nav_menu I am giving a value to ‘walker’ – this is the new instance of the walker class named WPB_Custom _Walker

Making a New Walker Class Instance

Make a copy of class Walker_Nav_Menu from  the original /wp-includes/class-walker-nav-menu.php – here I have added it to my theme’s /inc directory and named it custom-walker.php Make sure you change the class name from the original in the file, my one starts – class WPB_Custom_Walker extends Walker

<?php
// Copied from /wp-includes/class-walker-nav-menu.php into your theme and referenced in functions.php
class WPB_Custom_Walker extends Walker {
/**
* What the class handles.
*
* @since 3.0.0
* @access public
* @var string
*
* @see Walker::$tree_type
*/
public $tree_type = array( 'post_type', 'taxonomy', 'custom' );
/**
* Database fields to use.
*
* @since 3.0.0
* @access public
* @todo Decouple this.
* @var array
*
* @see Walker::$db_fields
*/
public $db_fields = array( 'parent' => 'menu_item_parent', 'id' => 'db_id' );
/**
* Starts the list before the elements are added.
*
* @since 3.0.0
*
* @see Walker::start_lvl()
*
* @param string $output Passed by reference. Used to append additional content.
* @param int $depth Depth of menu item. Used for padding.
* @param array $args An array of wp_nav_menu() arguments.
*/
public function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul class=\"sub-menu\">\n";
}
/**
* Ends the list of after the elements are added.
*
* @since 3.0.0
*
* @see Walker::end_lvl()
*
* @param string $output Passed by reference. Used to append additional content.
* @param int $depth Depth of menu item. Used for padding.
* @param array $args An array of wp_nav_menu() arguments.
*/
public function end_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "$indent</ul>\n";
}
/**
* Starts the element output.
*
* @since 3.0.0
* @since 4.4.0 The {@see 'nav_menu_item_args'} filter was added.
*
* @see Walker::start_el()
*
* @param string $output Passed by reference. Used to append additional content.
* @param object $item Menu item data object.
* @param int $depth Depth of menu item. Used for padding.
* @param array $args An array of wp_nav_menu() arguments.
* @param int $id Current item ID.
*/
public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = 'menu-item-' . $item->ID;
/**
* Filters the arguments for a single nav menu item.
*
* @since 4.4.0
*
* @param array $args An array of arguments.
* @param object $item Menu item data object.
* @param int $depth Depth of menu item. Used for padding.
*/
$args = apply_filters( 'nav_menu_item_args', $args, $item, $depth );
/**
* Filters the CSS class(es) applied to a menu item's list item element.
*
* @since 3.0.0
* @since 4.1.0 The `$depth` parameter was added.
*
* @param array $classes The CSS classes that are applied to the menu item's `<li>` element.
* @param object $item The current menu item.
* @param array $args An array of wp_nav_menu() arguments.
* @param int $depth Depth of menu item. Used for padding.
*/
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args, $depth ) );
$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
/**
* Filters the ID applied to a menu item's list item element.
*
* @since 3.0.1
* @since 4.1.0 The `$depth` parameter was added.
*
* @param string $menu_id The ID that is applied to the menu item's `<li>` element.
* @param object $item The current menu item.
* @param array $args An array of wp_nav_menu() arguments.
* @param int $depth Depth of menu item. Used for padding.
*/
$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args, $depth );
$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
$output .= $indent . '<li' . $attributes . $id . $class_names .' data-content="blah">';
$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 : '';
/**
* Filters the HTML attributes applied to a menu item's anchor element.
*
* @since 3.6.0
* @since 4.1.0 The `$depth` parameter was added.
*
* @param array $atts {
* The HTML attributes applied to the menu item's `<a>` element, empty strings are ignored.
*
* @type string $title Title attribute.
* @type string $target Target attribute.
* @type string $rel The rel attribute.
* @type string $href The href attribute.
* }
* @param object $item The current menu item.
* @param array $args An array of wp_nav_menu() arguments.
* @param int $depth Depth of menu item. Used for padding.
*/
$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args, $depth );
$attributes = '';
foreach ( $atts as $attr => $value ) {
if ( ! empty( $value ) ) {
$value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
$attributes .= ' ' . $attr . '="' . $value . '"';
}
}
/** This filter is documented in wp-includes/post-template.php */
$title = apply_filters( 'the_title', $item->title, $item->ID );
/**
* Filters a menu item's title.
*
* @since 4.4.0
*
* @param string $title The menu item's title.
* @param object $item The current menu item.
* @param array $args An array of wp_nav_menu() arguments.
* @param int $depth Depth of menu item. Used for padding.
*/
$title = apply_filters( 'nav_menu_item_title', $title, $item, $args, $depth );
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before . $title . $args->link_after;
$item_output .= '</a>';
$item_output .= $args->after;
/**
* Filters a menu item's starting output.
*
* The menu item's starting output only includes `$args->before`, the opening `<a>`,
* the menu item's title, the closing `</a>`, and `$args->after`. Currently, there is
* no filter for modifying the opening and closing `<li>` for a menu item.
*
* @since 3.0.0
*
* @param string $item_output The menu item's starting HTML output.
* @param object $item Menu item data object.
* @param int $depth Depth of menu item. Used for padding.
* @param array $args An array of wp_nav_menu() arguments.
*/
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
/**
* Ends the element output, if needed.
*
* @since 3.0.0
*
* @see Walker::end_el()
*
* @param string $output Passed by reference. Used to append additional content.
* @param object $item Page data object. Not used.
* @param int $depth Depth of page. Not Used.
* @param array $args An array of wp_nav_menu() arguments.
*/
public function end_el( &$output, $item, $depth = 0, $args = array() ) {
$output .= "</li>\n";
}
}

In essence now the new menu will follow the new walker instance so you can alter the output in custom-walker.php which will reflect on the rendered output on the new menu.

Adding Custom Fields for Data Attributes

There is a great library that allows us to add custom fields to the menu items in the backend of WordPress, which we then can output in our custom-walker.php file.

The library is here. Download it and extract the files in the screen grab, remember we already have custom-walker.php  and add into your themes /inc folder and bring in one of them to your functions.php file.

custom-walker-class

Bring in menu-item-custom-fields.php into functions.php

require_once dirname( __FILE__ ) . '/inc/menu-item-custom-fields.php';

This file menu-item-custom-fields.php in turn references the other walker-nav-menu-edit.php and the file in the doc directory – walker-nav-menu-edit.php gives us our sample custom fields which need to be copied and added to functions.php

<?php
// https://github.com/kucrut/wp-menu-item-custom-fields Library Plugin
class Menu_Item_Custom_Fields_Example {
/**
* Holds our custom fields
*
* @var array
* @access protected
* @since Menu_Item_Custom_Fields_Example 0.2.0
*/
protected static $fields = array();
/**
* Initialize plugin
*/
public static function init() {
add_action( 'wp_nav_menu_item_custom_fields', array( __CLASS__, '_fields' ), 10, 4 );
add_action( 'wp_update_nav_menu_item', array( __CLASS__, '_save' ), 10, 3 );
add_filter( 'manage_nav-menus_columns', array( __CLASS__, '_columns' ), 99 );
self::$fields = array(
'field_description' => __( 'Data Content', 'menu-item-custom-fields-example' ),
'field_02' => __( 'Custom Field #2', 'menu-item-custom-fields-example' ),
);
}
/**
* Save custom field value
*
* @wp_hook action wp_update_nav_menu_item
*
* @param int $menu_id Nav menu ID
* @param int $menu_item_db_id Menu item ID
* @param array $menu_item_args Menu item data
*/
public static function _save( $menu_id, $menu_item_db_id, $menu_item_args ) {
if ( defined( 'DOING_AJAX' ) && DOING_AJAX ) {
return;
}
check_admin_referer( 'update-nav_menu', 'update-nav-menu-nonce' );
foreach ( self::$fields as $_key => $label ) {
$key = sprintf( '_menu_item_%s', $_key );
// Sanitize
if ( ! empty( $_POST[ $key ][ $menu_item_db_id ] ) ) {
// Do some checks here...
$value = $_POST[ $key ][ $menu_item_db_id ];
}
else {
$value = null;
}
// Update
if ( ! is_null( $value ) ) {
update_post_meta( $menu_item_db_id, $key, $value );
}
else {
delete_post_meta( $menu_item_db_id, $key );
}
}
}
/**
* Print field
*
* @param object $item Menu item data object.
* @param int $depth Depth of menu item. Used for padding.
* @param array $args Menu item args.
* @param int $id Nav menu ID.
*
* @return string Form fields
*/
public static function _fields( $id, $item, $depth, $args ) {
foreach ( self::$fields as $_key => $label ) :
$key = sprintf( '_menu_item_%s', $_key );
$id = sprintf( 'edit-%s-%s', $key, $item->ID );
$name = sprintf( '%s[%s]', $key, $item->ID );
$value = get_post_meta( $item->ID, $key, true );
$class = sprintf( 'field-%s', $_key );
?>
<p class="description description-wide <?php echo esc_attr( $class ) ?>">
<?php printf(
'<label for="%1$s">%2$s<br /><input type="text" id="%1$s" class="widefat %1$s" name="%3$s" value="%4$s" /></label>',
esc_attr( $id ),
esc_html( $label ),
esc_attr( $name ),
esc_attr( $value )
) ?>
</p>
<?php
endforeach;
}
/**
* Add our fields to the screen options toggle
*
* @param array $columns Menu item columns
* @return array
*/
public static function _columns( $columns ) {
$columns = array_merge( $columns, self::$fields );
return $columns;
}
}
Menu_Item_Custom_Fields_Example::init();
view raw menu-items.php hosted with ❤ by GitHub

So in the above I have added one new specific field and left the other one at the default text…

self::$fields = array(
 'field_description' => __( 'Data Content', 'menu-item-custom-fields-example' ),
 'field_02' => __( 'Custom Field #2', 'menu-item-custom-fields-example' ),
 );

I have also changed any text from menu-item-%s to  _menu_item_%s in the function _save and function_fields

This is then ready in the admin backend…

custom-fields-in-menu

 

Output in the Front End Markup

Final thing is to retrieve the field with get_post_meta in the custom-walker.php file

 $item->datacontent = get_post_meta( $item->ID, '_menu_item_field_description', true );

Then call it in the <li> item

 $output .= $indent . '<li' . $attributes . $id . $class_names . 'data-content="' . $item->datacontent . '">';

custom-walker.php with custom field added at line 81 and called in the output at line 123

<?php
class WPB_Custom_Walker extends Walker {
/**
* What the class handles.
*
* @since 3.0.0
* @access public
* @var string
*
* @see Walker::$tree_type
*/
public $tree_type = array( 'post_type', 'taxonomy', 'custom' );
/**
* Database fields to use.
*
* @since 3.0.0
* @access public
* @todo Decouple this.
* @var array
*
* @see Walker::$db_fields
*/
public $db_fields = array( 'parent' => 'menu_item_parent', 'id' => 'db_id' );
/**
* Starts the list before the elements are added.
*
* @since 3.0.0
*
* @see Walker::start_lvl()
*
* @param string $output Passed by reference. Used to append additional content.
* @param int $depth Depth of menu item. Used for padding.
* @param array $args An array of wp_nav_menu() arguments.
*/
public function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul class=\"sub-menu\">\n";
}
/**
* Ends the list of after the elements are added.
*
* @since 3.0.0
*
* @see Walker::end_lvl()
*
* @param string $output Passed by reference. Used to append additional content.
* @param int $depth Depth of menu item. Used for padding.
* @param array $args An array of wp_nav_menu() arguments.
*/
public function end_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "$indent</ul>\n";
}
/**
* Starts the element output.
*
* @since 3.0.0
* @since 4.4.0 The {@see 'nav_menu_item_args'} filter was added.
*
* @see Walker::start_el()
*
* @param string $output Passed by reference. Used to append additional content.
* @param object $item Menu item data object.
* @param int $depth Depth of menu item. Used for padding.
* @param array $args An array of wp_nav_menu() arguments.
* @param int $id Current item ID.
*/
public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = 'menu-item-' . $item->ID;
$item->datacontent = get_post_meta( $item->ID, '_menu_item_field_description', true );
/**
* Filters the arguments for a single nav menu item.
*
* @since 4.4.0
*
* @param array $args An array of arguments.
* @param object $item Menu item data object.
* @param int $depth Depth of menu item. Used for padding.
*/
$args = apply_filters( 'nav_menu_item_args', $args, $item, $depth );
/**
* Filters the CSS class(es) applied to a menu item's list item element.
*
* @since 3.0.0
* @since 4.1.0 The `$depth` parameter was added.
*
* @param array $classes The CSS classes that are applied to the menu item's `<li>` element.
* @param object $item The current menu item.
* @param array $args An array of wp_nav_menu() arguments.
* @param int $depth Depth of menu item. Used for padding.
*/
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args, $depth ) );
$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
/**
* Filters the ID applied to a menu item's list item element.
*
* @since 3.0.1
* @since 4.1.0 The `$depth` parameter was added.
*
* @param string $menu_id The ID that is applied to the menu item's `<li>` element.
* @param object $item The current menu item.
* @param array $args An array of wp_nav_menu() arguments.
* @param int $depth Depth of menu item. Used for padding.
*/
$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args, $depth );
$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
$output .= $indent . '<li' . $attributes . $id . $class_names . 'data-content="' . $item->datacontent . '">';
$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 : '';
/**
* Filters the HTML attributes applied to a menu item's anchor element.
*
* @since 3.6.0
* @since 4.1.0 The `$depth` parameter was added.
*
* @param array $atts {
* The HTML attributes applied to the menu item's `<a>` element, empty strings are ignored.
*
* @type string $title Title attribute.
* @type string $target Target attribute.
* @type string $rel The rel attribute.
* @type string $href The href attribute.
* }
* @param object $item The current menu item.
* @param array $args An array of wp_nav_menu() arguments.
* @param int $depth Depth of menu item. Used for padding.
*/
$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args, $depth );
$attributes = '';
foreach ( $atts as $attr => $value ) {
if ( ! empty( $value ) ) {
$value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
$attributes .= ' ' . $attr . '="' . $value . '"';
}
}
/** This filter is documented in wp-includes/post-template.php */
$title = apply_filters( 'the_title', $item->title, $item->ID );
/**
* Filters a menu item's title.
*
* @since 4.4.0
*
* @param string $title The menu item's title.
* @param object $item The current menu item.
* @param array $args An array of wp_nav_menu() arguments.
* @param int $depth Depth of menu item. Used for padding.
*/
$title = apply_filters( 'nav_menu_item_title', $title, $item, $args, $depth );
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before . $title . $args->link_after;
$item_output .= '</a>';
$item_output .= $args->after;
/**
* Filters a menu item's starting output.
*
* The menu item's starting output only includes `$args->before`, the opening `<a>`,
* the menu item's title, the closing `</a>`, and `$args->after`. Currently, there is
* no filter for modifying the opening and closing `<li>` for a menu item.
*
* @since 3.0.0
*
* @param string $item_output The menu item's starting HTML output.
* @param object $item Menu item data object.
* @param int $depth Depth of menu item. Used for padding.
* @param array $args An array of wp_nav_menu() arguments.
*/
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
/**
* Ends the element output, if needed.
*
* @since 3.0.0
*
* @see Walker::end_el()
*
* @param string $output Passed by reference. Used to append additional content.
* @param object $item Page data object. Not used.
* @param int $depth Depth of page. Not Used.
* @param array $args An array of wp_nav_menu() arguments.
*/
public function end_el( &$output, $item, $depth = 0, $args = array() ) {
$output .= "</li>\n";
}
}
?>

data-attribute-list-item-wordpress

 

Mammoth task complete! – In some instances you may just want to add a jQuery fix but in others you may need the attribute value to change by the end user in which case you’ll need a custom solution.

1 Comment

  1. dan on April 19, 2017 at 8:38 am

    HI, Am trying to follow this but i can not see the custom fields in the backend, they are showing under ‘screen options’ just not the fields on the menu items?

    any idea why its not showing could be cos of the latest version of WP ?

Leave a Comment





%d bloggers like this: