0

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.enter image description here

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.

3

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>',
    ) );
  • Hi There, the question is about this class → "widget-item" This class seems to be coming from somewhere else. Probably we have to handle them with some array manipulation or something else. I am too naive in WordPress and programming world. – The WP Intermediate May 7 '17 at 17:18
  • OK, you've changed the question, then if you like to change the behaviour of the "widget-item" class instead of "widget-title" - just overwrite it in your custom CSS file, but if we are still talking about the site in the question - there's currently no margin or padding set for the "widget-item" class as I see. – Picard May 7 '17 at 17:45
  • May be CSS footer Flex Property is conflicting with this. – The WP Intermediate May 7 '17 at 18:04
  • On your screenshot (in the developer panel) you can clearly see that there is not padding or margin marked around the selected element. Could you upload another screenshot and mark the space that you'd like to get rid of. – Picard May 7 '17 at 18:24
  • 1
    Subscription widget takes now 50% of the space. If you want it to take 1/3 of the page width overwrite it in you custom CSS by for instance: .site-footer .widget-item { flex: 1 0 33%; } – Picard May 7 '17 at 19:03
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' );
  • what If i do not want any class? $params[0]['before_widget'] = '<div class="my-widget-class %2$s">' ; – The WP Intermediate May 7 '17 at 19:20
  • 1
    Empty the value: $params[0]['before_widget'] = ' ' ; $params[0]['after_widget'] = ' ' ; – Christina May 7 '17 at 19:24
  • No one does this. Global css for widgets and then specific css for sections. – Christina May 7 '17 at 19:25
  • Can you elaborate this? – The WP Intermediate May 7 '17 at 19:26
  • Not right now. You would need to learn more CSS to understand why. Quicky if i use a class like widget-item then I can style all widget-items with one class then if I want to make widget-items look differently in the footer I would do this .site-footer .widget-item. So I don't have to write loads of CSS. – Christina May 7 '17 at 19:28
0

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" );

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.