• Using wordpress, how do I remove the container div from any menu the user chooses to display in a widget?

    
    function al_widgets_init() {
    
        register_sidebar( array(
            'name' => __(AL_THEMENAME . ' sidebar', AL_THEMESLUG),
            'id' => 'sidebar',
            'description' => __('Right Sidebar area', AL_THEMESLUG),
            //'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
            //'after_widget' => '</li>',
            'before_widget' => '',
            'after_widget' => '',
            'before_title' => '<h3 class="widget">',
            'after_title' => '</h3>',
            'container_div' => null
        ) );
    
    }
    
    add_action( 'widgets_init', 'al_widgets_init' );`
    
    
    
    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(AL_THEMENAME . ' Sidebar') ) : ?>
    
    <?php endif; ?>
    

    View post on imgur.com

    • This topic was modified 3 years, 9 months ago by desbest.
    • This topic was modified 3 years, 9 months ago by desbest.
Viewing 7 replies - 1 through 7 (of 7 total)
  • The theme doesn’t rely on changing the HTML of widgets, since there could be anything and the widget could come with its own styles.
    But perhaps I am misunderstanding your question, since your code is concerning widget areas, but you are asking about menu widgets.

    Thread Starter desbest

    (@desbest)

    You don’t understand my question.

    Note the 2 lines I commented out.

            //'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
            //'after_widget' => '</li>',

    These come from the wp_nav_menu() function, not the register_sidebar() function.

    since your code is concerning widget areas, but you are asking about menu widgets.

    It appears that you have not considered that when making wordpress themes, that there is a distinction between using wp_nav_menu() to print a menu onto a page in a template php file, and instead printing a menu by having it appear in a widget area. However the customisation parameters available for wp_nav_menu() which is listed in wordpress documentation, I need some of them available for the latter.

    The menu appears in the widget AREA. Using the customise themes feature in wordpress, you can choose what menus appear in each widget AREA.

    I already know how to add a menu to a widget area. I am asking how to remove the container div from the HTML output that would be executed on the web page from such a thing.

    • This reply was modified 3 years, 9 months ago by desbest.

    OK, I did understand your question.
    You want to treat a menu widget differently than other widgets in the theme’s widget area. The theme shouldn’t be changing the HTML of any widget. It only controls the widget area. Simply change the styles applied to a particular widget, if you want to.
    The thing is, you don’t know how the widget generates its output. It could be using any function (not necessarily wp_nav_menu), and it can change at any time. So don’t try to affect widget HTML. It’s out of scope, intentionally, and should be independent.

    Thread Starter desbest

    (@desbest)

    Simply change the styles applied to a particular widget, if you want to.
    The thing is, you don’t know how the widget generates its output. It could be using any function (not necessarily wp_nav_menu), and it can change at any time. So don’t try to affect widget HTML.

    Simply change the styles applied to a particular widget, if you want to.

    So to confirm you understand my question, if a menu widget being placed in a widget area prints HTML like

    
    <div id="menu1" class="container">
    <ul>
    <li>item 1</li>
    <li>item 2</li>
    </ul>
    </div>
    

    And I want the output to not have a class applied to the container so it’s more like

    
    <div id="menu1">
    <ul>
    <li>item 1</li>
    <li>item 2</li>
    </ul>
    </div>

    `

    That it’s impossible to change this using a PHP function?

    I would like to avoid using jquery for this, because jquery will be executed after the page has loaded, and this will affect the user experience to have the appearance of <div> objects spontaneously change after the web page has finished loading in the web browser.

    • This reply was modified 3 years, 9 months ago by desbest.

    You don’t want to or need to change the HTML at all. What you need to do is use CSS styles to target a menu that’s part of your main menu area/structure, and menus that are part of a sidebar or widget. As an example…

    nav#primary-nav ul.menu {
        /* Styles for main menu */
    }
    #secondary ul.menu {
        /* Styles for widget-based menus /
    }

    Of course the CSS selctors will be differnt for your theme but that’s what you’d want to do. That way everything stays encapsualated in your theme and you don’t have to worry about doing anything with HTML or PHP.

    Thread Starter desbest

    (@desbest)

    Sorry I got my clarification wrong.
    I wasn’t trying to remove a class from a container div, but just remove the existence of the container div while keeping its contents.

    So

    
    <div id="menu1" class="container">
    <ul>
    <li>item 1</li>
    <li>item 2</li>
    </ul>
    </div>

    Would change to

    <ul>
    <li>item 1</li>
    <li>item 2</li>
    </ul>

    And this would have to apply for menus which appear in a “widget area” which can be defined on the customise page of the wordpress dashboard.

    View post on imgur.com

    • This reply was modified 3 years, 9 months ago by desbest.
    • This reply was modified 3 years, 9 months ago by desbest.
    • This reply was modified 3 years, 9 months ago by desbest.
    • This reply was modified 3 years, 9 months ago by desbest.

    If you’re outputting the menus using wp_nav_menu() then set the ‘container’ argument to false and that will remove the container element.

    If you’re using a standard navigation meu widget then I don’t think that you can. But that’s OK, jsut don’t style the container element and you won’t have a problem.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How do I remove the container div from menus appearing in a widget?’ is closed to new replies.