How to display Custom Menu as Select Dropdown in WordPress

In this article I show Bill Erickson’s code can be used to display select menu from a WordPress custom menu. Also included is a custom shortcode using which you can display select menu in widgets and Page/Post editor in this format: [menudropdown menu=”Header Menu”]

In your child theme directory, create lib/classes directory and upload a file named nav-menu-dropdown.php having this code:


<?php
/**
* Nav Menu Dropdown
*
* @package BE_Genesis_Child
* @since 1.0.0
* @link https://github.com/billerickson/BE-Genesis-Child
* @author Bill Erickson <bill@billerickson.net>
* @copyright Copyright (c) 2011, Bill Erickson
* @license http://opensource.org/licenses/gpl-2.0.php GNU Public License
*
*/

class Walker_Nav_Menu_Dropdown extends Walker_Nav_Menu {
function start_lvl(&$output, $depth){
$indent = str_repeat("\t", $depth); // don't output children opening tag (`<ul>`)
}

function end_lvl(&$output, $depth){
$indent = str_repeat("\t", $depth); // don't output children closing tag
}

/**
* Start the element output.
*
* @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. May be used for padding.
* @param array $args Additional strings.
* @return void
*/
function start_el(&$output, $item, $depth, $args) {
$url = '#' !== $item->url ? $item->url : '';
$output .= '<option value="' . $url . '">' . $item->title;
}

function end_el(&$output, $item, $depth){
$output .= "</option>\n"; // replace closing </li> with the option tag
}
}

 

Now wherever you want to display your custom menu as a select menu, use this following PHP code:


<?php
//* Do NOT include the opening php tag

// Nav Menu Dropdown Class
include_once( CHILD_DIR . '/lib/classes/nav-menu-dropdown.php' );

wp_nav_menu( array(
// 'theme_location' => 'mobile',
'menu' => 'Header Menu',
'walker' => new Walker_Nav_Menu_Dropdown(),
'items_wrap' => '<div class="mobile-menu"><form><select onchange="if (this.value) window.location.href=this.value">%3$s</select></form></div>',
) );

Replace Header Menu with the name or slug or id of your custom menu.

This method is using in: zboom menu

Credit Goes To Sridhar Katakam