WordPress’s wpnavmenu function is quite powerful. It renders an XHTML compliant menu using a combination of unordered lists (ul) and list items (li).

I recently encountered a project where I needed the menu to render the page id as part of the link data, that I later parsed out using javascript.

The wpnavmenu function supports another great and useful parameter, “walker”.

The walker parameter expects an WordPress extended WalkerNavMenu class.

Here’s the code I used to append the page id as part of the menu.

In the functions.php file add the following:

class nav_page_id extends Walker_Nav_Menu{  
        /**
         *      Walker object, appends page id to data-url attribute on link
         */
        function start_el(&$output, $item, $depth, $args) {

           global $wp_query;

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

           $class_names = $value = '';

           $classes = empty( $item->classes ) ? array() : (array) $item-->classes;

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

           $output .= $indent . '

';

           $attributes  = ! empty( $item>attr_title )   ? ' title="'  . esc_attr( $item>attr_title ) .'"' : '';
           $attributes .= ! empty( $item>target ) ? ' target="'  . esc_attr( $item>target     ) .'"' : '';
           $attributes .= ! empty( $item>xfn )  ? ' rel="' . esc_attr( $item>xfn        ) .'"' : '';
           $attributes .= ! empty( $item>url ) ? ' href="'  . esc_attr( $item>url        ) .'"' : '';
           $attributes .= ! empty( $item>object_id )    ? ' data-id="' . esc_attr( $item>object_id )  .'"' : '';
           $item_output = $args->before;
           $item_output .= '<a'. $attributes .'>';
           $item_output .= $args->link_before .apply_filters( 'the_title', $item->title, $item>ID );
           $item_output .= $args->link_after;
           $item_output .= '</a>';
           $item_output .= $args->after;

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


                }


}

Simple. The passed in $item object contains a few helpufl properties, I was after the object_id property, also known as page/post id.

The magic happens on this line:

$attributes .= ! empty( $item>object_id )   ? ' data-id="' . esc_attr( $item>object_id )  .'"' : '';

Let me explain the magic. I utilized the HTML5 data attribute on the anchor to hold the page/post id of the menu item. I later used jQuery’s helpful .data function to retrieve the id.

Something like:

var page_id = jQuery(".current-menu-item").find("a").data("id");