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

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

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

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

Without extending the default widget and creating your own custom widget from it, I am not sure if you can do this.

Here is a plugin that allows a significant amount of control here and should work for what you want to do.

  • Thanks for Feedback. Installing a 3th Party Plugin is not an option in my case I search a way to extend the custom menu widget class and override specific markups
    – fefe
    May 21, 2014 at 11:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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