Title: Dropdown Output
Last modified: August 21, 2016

---

# Dropdown Output

 *  Resolved [João Miguel](https://wordpress.org/support/users/babaloo/)
 * (@babaloo)
 * [11 years, 12 months ago](https://wordpress.org/support/topic/dropdown-output/)
 * Is there an option for outputting a dropdown menu? This would be perfect for 
   a “flat”, non-hierarchical output. Is there anyway I could use the plugin to 
   output a dropdown page list (no submit button), with CSS or php and the WP wp_dropdown_pages
   function?
 * And thank you for this wonderful piece of code, I love it!
 * [https://wordpress.org/plugins/custom-menu-wizard/](https://wordpress.org/plugins/custom-menu-wizard/)

Viewing 15 replies - 1 through 15 (of 19 total)

1 [2](https://wordpress.org/support/topic/dropdown-output/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/dropdown-output/page/2/?output_format=md)

 *  Plugin Author [wizzud](https://wordpress.org/support/users/wizzud/)
 * (@wizzud)
 * [11 years, 12 months ago](https://wordpress.org/support/topic/dropdown-output/#post-4931447)
 * From within the widget itself, No.
 * You could code an additional filter into your theme’s functions.php to do it,
   if you wished? As an example…
 *     ```
       add_filter( 'wp_nav_menu', 'my_cmw_nav_menu_as_dropdown', 10, 2 );
       function my_cmw_nav_menu_as_dropdown( $nav_menu, $args ){
         if( !empty( $args->_custom_menu_wizard )
             && $args->_custom_menu_wizard['flat_output'] ){
           $nav_menu = preg_replace_callback(
             array( '/<li[^>]*>(.*?)<\/li>/', '/<ul([^>]*)>/', '/<\/ul>/' ),
             'my_cmw_nav_menu_as_dropdown_callback',
             str_replace( '</ul>', '</select>', $nav_menu )
             );
         }
         return $nav_menu;
       }
       function my_cmw_nav_menu_as_dropdown_callback( $matches ){
         $firstChars = substr( $matches[0], 0, 2 );
         $rtn = $matches[0];
         if( $firstChars == '<l' ){
           if( preg_match( '/href="([^"]+)"[^>]*>([^<]+)</', $matches[1], $m ) > 0 ){
             $rtn = '<option data-href="' . $m[1] . '">' . $m[2] . '</option>';
           }else{
             $rtn = '<option>' . $matches[1] . '</option>';
           }
         }elseif( $firstChars == '<u' ){
           if( preg_match( '/id="(.*?)"/', $matches[1], $m ) > 0 ){
             $rtn = '<select name="' . $m[1] . '"' . $matches[1] . '>';
           }else{
             $rtn = '<select' . $matches[1] . '>';
           }
         }
         return $rtn;
       }
       ```
   
 *  Thread Starter [João Miguel](https://wordpress.org/support/users/babaloo/)
 * (@babaloo)
 * [11 years, 12 months ago](https://wordpress.org/support/topic/dropdown-output/#post-4931481)
 * Thanks, Wiz. I worked around it with a simple wp_dropdown_pages form…
 *     ```
       <?php $args = array(
       			'depth' => 0,
       			'sort_order' => 'ASC',
       			'sort_column' => 'menu_order',
       			'child_of' => 9,
       			'selected' => 0,
       			'echo' => 1,
       			'name' => 'page_id'); ?>
       			<form id="my-dropdown" action="<?php bloginfo('url'); ?>" method="get">
       			<?php wp_dropdown_pages( $args );?>
       			<input type="submit" name="submit" value="go" id="dropdown-btn" />
          </form>
       ```
   
 *  [Watch Teller](https://wordpress.org/support/users/watchteller/)
 * (@watchteller)
 * [11 years, 9 months ago](https://wordpress.org/support/topic/dropdown-output/#post-4931654)
 * [@babaloo](https://wordpress.org/support/users/babaloo/),
 * How to you apply to custom menu widget? And how to apply specific widget?
 * Thanks
 *  Plugin Author [wizzud](https://wordpress.org/support/users/wizzud/)
 * (@wizzud)
 * [11 years, 9 months ago](https://wordpress.org/support/topic/dropdown-output/#post-4931655)
 * The code sample _only_ runs if CMW has produced the output (the first _**if**_
   statement within the filter function). It is also conditional upon CMW having
   been asked to produce _flat_ output, but you can change that, or add other conditions
   as you wish.
 * If you need to restrict it to running against certain instance(s) of CMW then
   one way would be to give those instances a unique class (or maybe give a single
   instance a unique id?) and, as part of that first _**if**_ statement, also run
   a strpos() check for the string you have chosen.
    Of course, if none of your “
   other” CMW instances produce _flat_ output then you don’t need any other checks,
   but that is something only you can make a judgment on.
 *  [Watch Teller](https://wordpress.org/support/users/watchteller/)
 * (@watchteller)
 * [11 years, 9 months ago](https://wordpress.org/support/topic/dropdown-output/#post-4931656)
 * Thanks fast response, I am digging to understand your widget plugin and will 
   open new thread.
 * Basically I want a widget to split/select/exclude category for each category 
   widget with dropdown output (category widget) and string the “select a category”
   label and put before content (responsive theme).
 * Am I in the right plugin?
 * Thanks
 *  Plugin Author [wizzud](https://wordpress.org/support/users/wizzud/)
 * (@wizzud)
 * [11 years, 9 months ago](https://wordpress.org/support/topic/dropdown-output/#post-4931657)
 * I suspect not. CMW handles _Custom Menus_ … not Categories.
    Sorry.
 *  [Watch Teller](https://wordpress.org/support/users/watchteller/)
 * (@watchteller)
 * [11 years, 9 months ago](https://wordpress.org/support/topic/dropdown-output/#post-4931658)
 * Hi wizzud,
 * I had add category to custom menu and added your dropdown code in theme function.
   php.
 * I had saw dropdown box worked but the category cannot click to link to category
   page?
 * Need you help here.
 * Do you prefer open new thread?
 *  Plugin Author [wizzud](https://wordpress.org/support/users/wizzud/)
 * (@wizzud)
 * [11 years, 9 months ago](https://wordpress.org/support/topic/dropdown-output/#post-4931659)
 *     ```
       add_filter( 'wp_nav_menu', 'my_cmw_nav_menu_as_dropdown', 10, 2 );
       function my_cmw_nav_menu_as_dropdown( $nav_menu, $args ){
         if( !empty( $args->_custom_menu_wizard )
             && $args->_custom_menu_wizard['flat_output'] ){
           $nav_menu = preg_replace_callback(
             array( '/<li[^>]*>(.*?)<\/li>/', '/<ul([^>]*)>/', '/<\/ul>/' ),
             'my_cmw_nav_menu_as_dropdown_callback',
             str_replace( '</ul>', '</select>', $nav_menu )
             );
         }
         return $nav_menu;
       }
       function my_cmw_nav_menu_as_dropdown_callback( $matches ){
         $firstChars = substr( $matches[0], 0, 2 );
         $rtn = $matches[0];
         if( $firstChars == '<l' ){
           if( preg_match( '/href="([^"]+)"[^>]*>([^<]+)</', $matches[1], $m ) > 0 ){
             $rtn = '<option data-href="' . $m[1] . '">' . $m[2] . '</option>';
           }else{
             $rtn = '<option>' . $matches[1] . '</option>';
           }
         }elseif( $firstChars == '<u' ){
           if( preg_match( '/id="(.*?)"/', $matches[1], $m ) > 0 ){
             $rtn = '<select name="' . $m[1] . '"' . $matches[1];
           }else{
             $rtn = '<select' . $matches[1];
           }
           $rtn .= ' onchange="window.location.href=jQuery(this).find(\'option:selected\').data().href;"><option value="">Select a Category...</option>';
         }
         return $rtn;
       }
       ```
   
 *  [Watch Teller](https://wordpress.org/support/users/watchteller/)
 * (@watchteller)
 * [11 years, 9 months ago](https://wordpress.org/support/topic/dropdown-output/#post-4931660)
 * Hi Wizzud,
 * Thanks very fast response. You are Genius and the Best. Exactly I wan to plan
   to have for both desktop and touch/mobile device.
 * Sorry for my English.
    1. Sorry! Actually I want to avoid to have “Select a Category”.
   2. Appreciated if possible you can make the snippets to suitable both Hierarchical
   and flat option.
 * Thousand thanks
 *  [Watch Teller](https://wordpress.org/support/users/watchteller/)
 * (@watchteller)
 * [11 years, 9 months ago](https://wordpress.org/support/topic/dropdown-output/#post-4931661)
 * Update!
 * The right vertical border line of dropdown box will missing if custom CSS width
   setting to 195px or 100% (sidebar and body) at touch device. But custom CSS width
   to 220px or 99% will be worked nice.
 * regards
 *  Plugin Author [wizzud](https://wordpress.org/support/users/wizzud/)
 * (@wizzud)
 * [11 years, 9 months ago](https://wordpress.org/support/topic/dropdown-output/#post-4931662)
 * If you don’t want “Select a Category”, just replace it with whatever you do want(
   or a non-breaking space).
 * [“Select a Category” should really be `<?php __("Select a Category"); ?>`]
 * If you don’t want to restrict it to _Flat_ output instances, then remove
 *     ```
       && $args->_custom_menu_wizard['flat_output']
       ```
   
 * However, unless you plan on adding some very fancy indents into your OPTIONs –
   to indicate levels – then I see no advantage in setting the instance to _Hierarchical_
   output.
    **EDIT**: Also, making it Hierarchical would actually break the code
   because there would be multiple, nested UL elements!
 * As for styling, that’s down to your theme. You can add whatever id or classes
   you like to the container, and then use them to style how you see fit. CMW does
   _not_ provide any styling.
 *  [Watch Teller](https://wordpress.org/support/users/watchteller/)
 * (@watchteller)
 * [11 years, 9 months ago](https://wordpress.org/support/topic/dropdown-output/#post-4931663)
 * Noted and thanks you fast response.
 * Terrible sorry my english.
 * OK. I don’t want “Select a Category” text in box, something like below with dropdown
   function.
 * In my Custom Menu:
 * Shop Business & Finance
    - Accounting
    - Banking
    - Business Law
    - Economics
 * Dropdown output will be..
 * **Shop Business & Finance (to be title in the box)**
    - Accounting
    - Business Law
    - Economics
 * in this plugin I will setting:
    1. Filters > Exclusions: By Level 1 2. Output
   > Set Title from: …or its Root
 * I need the Level 1 to be title in the dropdown box to for each/split custom menu
   widget.
 * Look forward you guide.
 *  [Watch Teller](https://wordpress.org/support/users/watchteller/)
 * (@watchteller)
 * [11 years, 9 months ago](https://wordpress.org/support/topic/dropdown-output/#post-4931664)
 * Hi Wizzud,
 * Solved! To remove the “`Select a Category...</option>`“, this will shown level
   1 as title in the dropdown box.
 * Is that any way **remain** level as title in the dropdwon box but **not shown
   inside** drop-downed menu?
 *  Plugin Author [wizzud](https://wordpress.org/support/users/wizzud/)
 * (@wizzud)
 * [11 years, 9 months ago](https://wordpress.org/support/topic/dropdown-output/#post-4931665)
 *     ```
       add_filter( 'wp_nav_menu', 'my_cmw_nav_menu_as_dropdown', 10, 2 );
       function my_cmw_nav_menu_as_dropdown( $nav_menu, $args ){
         if( !empty( $args->_custom_menu_wizard )
             && $args->_custom_menu_wizard['flat_output'] ){
           $nav_menu = preg_replace_callback(
             array( '/<li[^>]*>(.*?)<\/li>/', '/<ul([^>]*)>/', '/<\/ul>/' ),
             'my_cmw_nav_menu_as_dropdown_callback',
             str_replace( '</ul>', '</select>', $nav_menu )
             );
           $title = '';
           //determine which title to use...
           foreach( array('current', 'current_root', 'branch', 'branch_root') as $v){
             if( $args->_custom_menu_wizard[ 'title_from_' . $v ]
                 && !empty( $args->_custom_menu_wizard['_walker'][ $v . '_title' ] ) ){
               $title = $args->_custom_menu_wizard['_walker'][ $v . '_title' ];
               break;
             }
           }
           //put title into first option...
           $nav_menu = sprintf( $nav_menu, $title );
         }
         return $nav_menu;
       }
       function my_cmw_nav_menu_as_dropdown_callback( $matches ){
         $firstChars = substr( $matches[0], 0, 2 );
         $rtn = $matches[0];
         if( $firstChars == '<l' ){
           if( preg_match( '/href="([^"]+)"[^>]*>([^<]+)</', $matches[1], $m ) > 0 ){
             $rtn = '<option data-href="' . $m[1] . '">' . $m[2] . '</option>';
           }else{
             $rtn = '<option>' . $matches[1] . '</option>';
           }
         }elseif( $firstChars == '<u' ){
           if( preg_match( '/id="(.*?)"/', $matches[1], $m ) > 0 ){
             $rtn = '<select name="' . $m[1] . '"' . $matches[1];
           }else{
             $rtn = '<select' . $matches[1];
           }
           $rtn .= ' onchange="window.location.href=jQuery(this).find(\'option:selected\').data().href;"><option value="" selected="selected">%$1s</option>';
         }
         return $rtn;
       }
       ```
   
 * This version replaces the previous _**“Select a Category”**_ text with the widget
   title (as determined by the CMW widget settings). I am still unclear as to whether
   this is actually what you want, but it is based on :
 * > …don’t want “Select a Category” text in box…
 * Since _**“Select a Category”**_ was the text in the first **OPTION** of the SELECT,
   then _“box”_ must mean the **SELECT** element…
 * > Dropdown output will be..
 * I can only assume that _“dropdown”_ means the **SELECT** element again.
 * > Shop Business & Finance (to be title in the box)
 * Since _“box”_ previously referred to the **SELECT** element, then this must mean
   that – in this particular instance – _**“Shop & Business Finance”**_ replaces_**“
   Select a Category”**_, ie. put the widget title (as determined by CMW) into the
   first **OPTION** of the **SELECT**.
    However, this now refers to “title” … but
   there is no concept of a visible title as such in a **SELECT** element, so ….
   hmmm
 * > …need the Level 1 to be title in the dropdown box…
 * Ok, the _“Level 1”_ bit is determined by the CMW settings, but now we have _“
   title in the dropdown box”_, which (again) brings in the _“title”_ – that I don’t
   quite get – and a double reference to the **SELECT** element.
 * So, unless I’ve totally misunderstood (which is a distinct possibility!) you 
   want a **SELECT** element with the widget title (as determined by CMW) as the
   first **OPTION** … that’s what I’ve provided.
 * On the other hand, _“box”_ might be the SELECT’s container … in some cases?
    
   And _“dropdown”_ might not be the SELECT … in some cases? And _“title”_ might
   mean … ?
 *  Plugin Author [wizzud](https://wordpress.org/support/users/wizzud/)
 * (@wizzud)
 * [11 years, 9 months ago](https://wordpress.org/support/topic/dropdown-output/#post-4931666)
 * Sorry, I was writing while you had solved …
    Glad you’re sorted.

Viewing 15 replies - 1 through 15 (of 19 total)

1 [2](https://wordpress.org/support/topic/dropdown-output/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/dropdown-output/page/2/?output_format=md)

The topic ‘Dropdown Output’ is closed to new replies.

 * ![](https://ps.w.org/custom-menu-wizard/assets/icon-256x256.png?rev=1381901)
 * [Custom Menu Wizard Widget](https://wordpress.org/plugins/custom-menu-wizard/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/custom-menu-wizard/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/custom-menu-wizard/)
 * [Active Topics](https://wordpress.org/support/plugin/custom-menu-wizard/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/custom-menu-wizard/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/custom-menu-wizard/reviews/)

## Tags

 * [dropdown](https://wordpress.org/support/topic-tag/dropdown/)

 * 19 replies
 * 3 participants
 * Last reply from: [Watch Teller](https://wordpress.org/support/users/watchteller/)
 * Last activity: [11 years, 9 months ago](https://wordpress.org/support/topic/dropdown-output/page/2/#post-4931670)
 * Status: resolved