Override custom menu widget

I would like to override some mark-up and css (like <div class="soma_container"><ul class=""></ul></div>)styling on a chosen custom menu widget. How would I do that? Should be hooked as the main navigation in functions.php or if there is good tutorial on this would be really appreciated

I think a some of the thing I can make on widget poition init

  register_sidebar(array(
    'name'          => __('Sidebar Menu', 'roots'),
    'id'            => 'sidebar-primary',
    'before_widget' => '<section class="widget %1$s %2$s">',
    'after_widget'  => '</section>',
    'before_title'  => '<h3>',
    'after_title'   => '</h3>',
  ));

but how would override the list css for the custom menu

2 Answers
2

Ok, here we go. I extended the default Navigation widget for you. Add this to your themes functions file. After you have done this, go to widgets in your dashboard and you will see a widget called ‘Matt Royal Custom Menu’ now. Use this one.

In the below code, the div class has been added as you have specified and you can use any arguments in the wp_nav_menu( $args ) function. You can find all arguments you can pass to it on the WordPress Codex: http://codex.wordpress.org/Function_Reference/wp_nav_menu

// MattRoyal Custom Navigation Menu widget class

     class Royal_Nav_Menu_Widget extends WP_Widget {

        function Royal_Nav_Menu_Widget() {
            $widget_ops = array( 'description' => __('Add a custom menu to your sidebar.') );
            parent::__construct( 'nav_menu', __('Matt Royal 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;

            /** This filter is documented in wp-includes/default-widgets.php */
            $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' => '', 'menu' => $nav_menu, 'container_class' => 'soma_container', 'menu_class' => 'some_list', ) );

            echo $args['after_widget'];
        }

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

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

            // Get menus
            $menus = wp_get_nav_menus( array( 'orderby' => 'name' ) );

            // 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="https://wordpress.stackexchange.com/questions/145094/%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('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'); ?>">
                    <option value="0"><?php _e( '&mdash; Select &mdash;' ) ?></option>
            <?php
                foreach ( $menus as $menu ) {
                    echo '<option value="' . $menu->term_id . '"'
                        . selected( $nav_menu, $menu->term_id, false )
                        . '>'. esc_html( $menu->name ) . '</option>';
                }
            ?>
                </select>
            </p>
            <?php
        }
    }

    add_action('widgets_init', create_function('', 'return register_widget("Royal_Nav_Menu_Widget");'));

Leave a Comment