How to avoid the <div> and <ul> which added when custon menu widget is used

Question

I need to remove the custom menu widget

<div class="menu-main-container">
<ul id="main" class="menu">

from appearing above the <li>. Because of this two lines my menus are not appearing correctly as I given. I need to display the <li> menu list just after <ul class="my_custom_class"> but now the above lines are appearing in between the my_custom class and <li> list.

If my explanation is not clear please forgive me & ask me for any further clarifications.

source code:

register_sidebar(array(
    'name' => 'Top Menu',
    'id' => 'topmenu-sidebar',
    'description' => 'Appears as the sidebar on the all pages',
    'before_widget' => '<ul class="my_custom_class">',
    'after_widget' => '</ul>',
    'before_title' => '<li>',
    'after_title' => '</li>',
    ));

output:

<ul class="my_custom_class">
 <div class="menu-main-container">
   <ul id="menu-main" class="menu">
      <li>....</li>

i need the output like below:[how i remove that div and ul. this is my issue]

<ul class="my_custom_class">
   <li>....</li>

the above question is resolved.

Answer 1

The reason you get the div and ul is the custom menu uses wp_nav_menu which generates the output. There are 2 arguments ( container, menu_class ) which have default values as div and menu respectively. As a result the output you see has a div and ul having class menu. Please have a look here http://codex.wordpress.org/Function_Reference/wp_nav_menu

The default custom menu does not provide any hook so that we can alter the output on the fly. So we have to create a similar widget which will allow us to manage the output. Please put the following code in your active theme's functions.php file

/**
 * WTI Custom Navigation Menu widget class
 *
 * @since 3.0.0
 */

class Wti_Custom_Nav_Menu_Widget extends WP_Widget {

    function __construct() {
        $widget_ops = array( 'description' => __('Use this widget to add one of your custom menus as a widget.') );
        parent::__construct( 'custom_nav_menu', __('WTI Custom Menu'), $widget_ops );
    }

    function widget($args, $instance) {
        // Get menu
        $nav_menu = ! empty( $instance['nav_menu'] ) ? wp_get_nav_menu_object( $instance['nav_menu'] ) : false;

        if ( !$nav_menu )
            return;

        $instance['title'] = apply_filters( 'widget_title', empty( $instance['title'] ) ? '' : $instance['title'], $instance, $this->id_base );

        echo $args['before_widget'];

        if ( !empty($instance['title']) )
            echo $args['before_title'] . $instance['title'] . $args['after_title'];

        wp_nav_menu(
                array(
                    'fallback_cb' => '',
                    'container' => '',
                    'menu_class' => $instance['menu_class'],
                    'menu' => $nav_menu
                )
            );

        echo $args['after_widget'];
    }

    function update( $new_instance, $old_instance ) {
        $instance['title'] = strip_tags ( stripslashes ( $new_instance['title'] ) );
        $instance['menu_class'] = strip_tags ( stripslashes ( trim ( $new_instance['menu_class'] ) ) );
        $instance['nav_menu'] = (int) $new_instance['nav_menu'];

        return $instance;
    }

    function form( $instance ) {
        $title = isset( $instance['title'] ) ? $instance['title'] : '';
        $menu_class = isset( $instance['menu_class'] ) ? $instance['menu_class'] : '';
        $nav_menu = isset( $instance['nav_menu'] ) ? $instance['nav_menu'] : '';

        // Get menus
        $menus = get_terms( 'nav_menu', array( 'hide_empty' => false ) );

        // If no menus exists, direct the user to go and create some.
        if ( !$menus ) {
            echo '<p>'. sprintf( __('No menus have been created yet. <a href="%s">Create some</a>.'), admin_url('nav-menus.php') ) .'</p>';
            return;
        }
        ?>
        <p>
            <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:') ?></label>
            <input type="text" class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" value="<?php echo $title; ?>" />
        </p>
        <p>
            <label for="<?php echo $this->get_field_id('menu_class'); ?>"><?php _e('Menu Class:') ?></label>
            <input type="text" class="widefat" id="<?php echo $this->get_field_id('menu_class'); ?>" name="<?php echo $this->get_field_name('menu_class'); ?>" value="<?php echo $menu_class; ?>" />
        </p>
        <p>
            <label for="<?php echo $this->get_field_id('nav_menu'); ?>"><?php _e('Select Menu:'); ?></label>
            <select id="<?php echo $this->get_field_id('nav_menu'); ?>" name="<?php echo $this->get_field_name('nav_menu'); ?>">
        <?php
            foreach ( $menus as $menu ) {
                echo '<option value="' . $menu->term_id . '"'
                    . selected( $nav_menu, $menu->term_id, false )
                    . '>'. $menu->name . '</option>';
            }
        ?>
            </select>
        </p>
        <?php
    }
}

function wti_custom_nav_menu_widget() {
    register_widget('Wti_Custom_Nav_Menu_Widget');
}

add_action ( 'widgets_init', 'wti_custom_nav_menu_widget', 1 );

Now you will see a new widget WTI Custom Menu on the widgets screen. Use this widget. This will have a field menu_class so that you can set the class of the ul. You can put whatever class you want like my_custom_class and save the widget. Now when you will see the output, this will not have any div which was earlier automatically generated and the ul will have a new class as you have set.

You will have to change register_sidebar code. Now no need to have my_custom_class as the widget will automatically generate this. You can have different html element like div for this.