{"id":4192,"date":"2022-08-21T22:13:01","date_gmt":"2022-08-21T16:43:01","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-menu-items-description-custom-walker-for-wp_nav_menu\/"},"modified":"2022-08-21T22:13:01","modified_gmt":"2022-08-21T16:43:01","slug":"solved-menu-items-description-custom-walker-for-wp_nav_menu","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-menu-items-description-custom-walker-for-wp_nav_menu\/","title":{"rendered":"[Solved] Menu items description? Custom Walker for wp_nav_menu()"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

You need a custom walker for the nav menu.<\/p>\n

Basically, you add a parameter 'walker'<\/code> to the wp_nav_menu()<\/code><\/a> options and call an instance of an enhanced class:<\/p>\n

wp_nav_menu(\n    array (\n        'menu'            => 'main-menu',\n        'container'       => FALSE,\n        'container_id'    => FALSE,\n        'menu_class'      => '',\n        'menu_id'         => FALSE,\n        'depth'           => 1,\n        'walker'          => new Description_Walker\n    )\n);\n<\/code><\/pre>\n
The class Description_Walker<\/code> extends Walker_Nav_Menu<\/code><\/a> and changes the function start_el( &$output, $item, $depth, $args )<\/code> to look for $item->description<\/code>.<\/p>\n
A basic example:<\/p>\n
\/**\n * Create HTML list of nav menu items.\n * Replacement for the native Walker, using the description.\n *\n * @see    https:\/\/wordpress.stackexchange.com\/q\/14037\/\n * @author fuxia\n *\/\nclass Description_Walker extends Walker_Nav_Menu\n{\n    \/**\n     * Start the element output.\n     *\n     * @param  string $output Passed by reference. Used to append additional content.\n     * @param  object $item   Menu item data object.\n     * @param  int $depth     Depth of menu item. May be used for padding.\n     * @param  array|object $args    Additional strings. Actually always an \n                                     instance of stdClass. But this is WordPress.\n     * @return void\n     *\/\n    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 )\n    {\n        $classes     = empty ( $item->classes ) ? array () : (array) $item->classes;\n\n        $class_names = join(\n            ' '\n        ,   apply_filters(\n                'nav_menu_css_class'\n            ,   array_filter( $classes ), $item\n            )\n        );\n\n        ! empty ( $class_names )\n            and $class_names=\" class=\"\". esc_attr( $class_names ) . '\"';\n\n        $output .= \"<li id='menu-item-$item->ID' $class_names>\";\n\n        $attributes=\"\";\n\n        ! empty( $item->attr_title )\n            and $attributes .= ' title=\"'  . esc_attr( $item->attr_title ) .'\"';\n        ! empty( $item->target )\n            and $attributes .= ' target=\"' . esc_attr( $item->target     ) .'\"';\n        ! empty( $item->xfn )\n            and $attributes .= ' rel=\"'    . esc_attr( $item->xfn        ) .'\"';\n        ! empty( $item->url )\n            and $attributes .= ' href=\"'   . esc_attr( $item->url        ) .'\"';\n\n        \/\/ insert description for top level elements only\n        \/\/ you may change this\n        $description = ( ! empty ( $item->description ) and 0 == $depth )\n            ? '<small class=\"nav_desc\">' . esc_attr( $item->description ) . '<\/small>' : '';\n\n        $title = apply_filters( 'the_title', $item->title, $item->ID );\n\n        $item_output = $args->before\n            . \"<a $attributes>\"\n            . $args->link_before\n            . $title\n            . '<\/a> '\n            . $args->link_after\n            . $description\n            . $args->after;\n\n        \/\/ Since $output is called by reference we don't need to return anything.\n        $output .= apply_filters(\n            'walker_nav_menu_start_el'\n        ,   $item_output\n        ,   $item\n        ,   $depth\n        ,   $args\n        );\n    }\n}\n<\/code><\/pre>\n
Or, alternatively as @nevvermind commented, you could inherit<\/em> all the functionalities of the parent’s start_el<\/code> function and just append<\/em> the description to $output<\/code>:<\/p>\n
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) \n{\n    parent::start_el( $output, $item, $depth, $args );\n    $output .= sprintf( \n        '<i>%s<\/i>', \n        esc_html( $item->description ) \n    );\n}\n<\/code><\/pre>\n
Sample output:<\/p>\n
\"enter<\/p>\n
Now enable the description field in wp-admin\/nav-menus.php<\/code><\/a> to get the ability to edit this field. If you don\u2019t WP just trashes your complete post content into it.  <\/p>\n
\"enter<\/p>\n
Further reading: <\/p>\n