WordPress.org

Forums

Custom Menu Wizard Widget
[resolved] Dropdown Output (20 posts)

  1. Babaloo
    Member
    Posted 11 months ago #

    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/

  2. wizzud
    Member
    Plugin Author

    Posted 11 months ago #

    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;
    }
  3. Babaloo
    Member
    Posted 11 months ago #

    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>
  4. Watch Teller
    Member
    Posted 9 months ago #

    @Babaloo,

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

    Thanks

  5. wizzud
    Member
    Plugin Author

    Posted 9 months ago #

    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.

  6. Watch Teller
    Member
    Posted 9 months ago #

    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

  7. wizzud
    Member
    Plugin Author

    Posted 9 months ago #

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

  8. Watch Teller
    Member
    Posted 9 months ago #

    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?

  9. wizzud
    Member
    Plugin Author

    Posted 9 months ago #

    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;
    }
  10. Watch Teller
    Member
    Posted 9 months ago #

    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

  11. Watch Teller
    Member
    Posted 9 months ago #

    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

  12. wizzud
    Member
    Plugin Author

    Posted 9 months ago #

    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.

  13. Watch Teller
    Member
    Posted 9 months ago #

    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.

  14. Watch Teller
    Member
    Posted 9 months ago #

    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?

  15. wizzud
    Member
    Plugin Author

    Posted 9 months ago #

    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 ... ?

  16. wizzud
    Member
    Plugin Author

    Posted 9 months ago #

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

  17. Watch Teller
    Member
    Posted 9 months ago #

    Wow...Very fast code response. Genuine. ...

    Reply via mobile.

    Refer http://wordpress.org/support/topic/simplest-of-cms-menu-functions?replies=7 if that possible your plugin to build "likely like Amazon Product Filter Menu"?

  18. Watch Teller
    Member
    Posted 9 months ago #

    Hi Wizzud,

    Trying you new code.

    $nav_menu = sprintf( $nav_menu, $title );

    Warning: sprintf(): Argument number must be greater than zero in /home4/bigbestb/public_html/seo/themes/bazar/functions.php on line 41

    My mobile site. For you preview: https://docs.google.com/file/d/0B4Gb-AO3e5BYb1FYNGlwWFlkSTg/edit?usp=drivesdk

  19. wizzud
    Member
    Plugin Author

    Posted 9 months ago #

    Damn. Typo : 4th line up from bottom, %$1s should be %1$s.
    Sorry 'bout that.

  20. Watch Teller
    Member
    Posted 9 months ago #

    Thanks!

    Will update you here.

Reply

You must log in to post.

About this Plugin

  • Custom Menu Wizard Widget
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic

Tags