Get rid of the widget Item Class="widget-item"

Question

Can we please stick ourselves to the genuine solution, not a slipshod remedy. The objective of this question is to completely get rid of the class "widget-item". please do not post compromised solutions like manipulating CSS etc else the objective of posting the question will be defied.

I want to get rid of this class="widget-item" because this is creating extra margin/padding. Please see the image.

I want to get rid of this class, but not div as it might rupture the design.

I am sure there should be some method to remove this because when we write widgets for menus this is possible like this →

'container'   => 'nav',
'container_class' => 'footer-menu'

we can change div to nav and also insert our own class "footer-menu".

Live Link where this is happening could be seen here.

Answer 1

The most straightforward way would be to overwrite this in your CSS file, for instance like this:

.widgettitle {
    padding: 0;
    margin: 0;
}

Alternatively you can change the name of the class when registering your widget (possibly in your functions.php file) - look for the 'before_title' parameter. Here's and example form the original twentysexteen template:

register_sidebar( array(
        'name'          => __( 'Sidebar', 'twentysixteen' ),
        'id'            => 'sidebar-1',
        'description'   => __( 'Add widgets here to appear in your sidebar.', 'twentysixteen' ),
        'before_widget' => '<section id="%1$s" class="widget %2$s">',
        'after_widget'  => '</section>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ) );

Answer 2

The widget-item class is in the $params for registered sidebars in the theme you are using. If you want to remove it and replace it with something else, you can by using the dynamic_sidebar_params filter or you can find it in your theme (if you are using a parent theme and not a child theme) and just change it, however the results may be not what you expect because the padding and margin is not coming from that class.

This filter below would be added last in your child theme's functions.php file AFTER all other functions and outside of all functions and after all includes/requires. In this example widget-item will be replaced by my-widget-class (which you would change). In this situation, .widget-item or any class here provides a global class to widgets and does not have padding or margin on it as in your image. When you use developer tools, you can clearly see that the child is the element with the margin and the padding.

function prefix_filter_widget_div_wrappper( $params ) {

    $params[0]['before_widget'] = '<div class="my-widget-class %2$s">' ;

    $params[0]['after_widget']  = '</div>' ;

    return $params;

}
add_filter( 'dynamic_sidebar_params' , 'prefix_filter_widget_div_wrappper' );

The issue in your situation is this .newsletter child of .widget-item and if you use CSS specificity, you can adjust the appearance for the location:

.newsletter {
    padding: 25px;
    ..etc.
}

Like this:

.site-footer .newseltter {
    padding: 10px;
    margin: 0;
}

Conditional for dynamic_sidebar_params filter.

Locate your registered sidebar ID by looking for where it is registered in your theme functions php file(s) parent or child.

function prefix_filter_widget_div_wrappper_conditional( $params ) {

    //* where `register-sidebar-id` is the registered sidebar id (you would look for this in your theme's code)

    if ( 'registered-sidebar-id' === $params[0][ 'id' ] ) :

        $params[0]['before_widget'] = '<div class="my-widget-class %2$s">' ;

        $params[0]['after_widget']  = '</div>' ;

    endif;

    return $params;

}
add_filter( 'dynamic_sidebar_params' , 'prefix_filter_widget_div_wrappper_conditional' );

Answer 3

Perhaps the easiest way would be to create a plugin that enqueues a jQuery script.

plugin.php

/**
 * Plugin Name: Remove Widget Item Class
 */

add_action( 'wp_enqueue_scripts', 'wpse_266151_enqueue_scripts' );
wpse_266151_enqueue_scripts() {
  wp_enqueue_script(
    'remove-widget-item-class', 
    plugins_url( 'remove-widget-item-class.js', __FILE__ ), 
    [ 'jquery' ]
  );
}

remove-widget-item-class.js

jQuery( ".widget-item" ).removeClass( "widget-item" );