WordPress.org

Support

Support » Plugins and Hacks » [Resolved] Dropdown Output

[Resolved] Dropdown Output

  • João Miguel
    Participant

    @babaloo

    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/

Viewing 15 replies - 1 through 15 (of 19 total)
  • Plugin Author wizzud
    Participant

    @wizzud

    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;
    }

    João Miguel
    Participant

    @babaloo

    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
    Participant

    @watchteller

    @babaloo,

    How to you apply to custom menu widget? And how to apply specific widget?

    Thanks

    Plugin Author wizzud
    Participant

    @wizzud

    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
    Participant

    @watchteller

    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
    Participant

    @wizzud

    I suspect not. CMW handles Custom Menus … not Categories.
    Sorry.

    Watch Teller
    Participant

    @watchteller

    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
    Participant

    @wizzud

    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
    Participant

    @watchteller

    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
    Participant

    @watchteller

    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
    Participant

    @wizzud

    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
    Participant

    @watchteller

    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
    Participant

    @watchteller

    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
    Participant

    @wizzud

    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
    Participant

    @wizzud

    Sorry, I was writing while you had solved …
    Glad you’re sorted.

Viewing 15 replies - 1 through 15 (of 19 total)
  • The topic ‘[Resolved] Dropdown Output’ is closed to new replies.