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:

    '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>',


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

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

<ul class="my_custom_class">

the above question is resolved.

  • It commonly adding up from your functions.php under register_sidebar() function. Can you check there for necessary modification? – Mayeenul Islam Dec 2 '13 at 10:24
  • but sir..at there i gave <ul class="my_custom_class"> for before widget parameter. – Zammuuz Dec 2 '13 at 11:03
  • If you have added before widget parameter, then it will wrap the content within that keeping the actual custom widget output. Can you please look into the source code and see the structure and confirm whether I am correct or not? – Chittaranjan Dec 2 '13 at 11:17
  • @Chittaranjan: please look at my updated question – Zammuuz Dec 2 '13 at 12:19
  • Why do you need that particular structure? – s_ha_dum Dec 2 '13 at 15:21

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 )

        $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'];

                    '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>';
            <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; ?>" />
            <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; ?>" />
            <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'); ?>">
            foreach ( $menus as $menu ) {
                echo '<option value="' . $menu->term_id . '"'
                    . selected( $nav_menu, $menu->term_id, false )
                    . '>'. $menu->name . '</option>';

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

|improve this answer|||||
  • wow..thats amazing... thank u..friend... but can i ask u one thing.. i upadated my code as like u said but when i give sub menu item it is not coming as drop down menu even if i wrote css code for that. can u please help me in that too?? – Zammuuz Dec 3 '13 at 4:05
  • the class i wrote in the css is "dropdown-menu" but now when i give a sub menu the class genberated is "sub-menu" and it displays just below the parent menu. why this happening like this? :( please help me – Zammuuz Dec 3 '13 at 4:14
  • You need to define the css for the same class as you have assigned to the menu. Wordpress has built-in functionality for dropdown menu. So you can copy the code and modify it as per your structure and it should work. – Chittaranjan Dec 3 '13 at 11:01
  • u mean overwriting "Walker_Nav_Menu"? i did that and the code is appended with my question. could u plz check it?because it is not working properly – Zammuuz Dec 3 '13 at 11:08
  • I do not understand why you are going for walker class. Are you trying to modify the above code which I have provided? You need to define the css/js for the above menu. Please refer to wordpress default theme where you will find the dropdown functionality already integrated. You can get the coding from there. – Chittaranjan Dec 3 '13 at 12:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.