I want to create custom dropdown field with CSS animation settings, that would add different CSS classes to the Text Widget <div>.

I've done this for third-party widgets, but I can't imagine how to do this for default widgets, like Text or Tag cloud, because they're located in the wp-includes directory.


Simply edit your theme functions.php file,

find : register_sidebar function

check out the name attribute in the function to make sure which widget you are going to update

There should be an attribute called before_widget

you can define your custom CSS Class name into it

here is the sample code for your reference

register_sidebar( array(
    'name'          => __( 'News Sidebar', 'left-test-sidebar' ),
    'id'            => 'sidebar-1',
    'description'   => __( 'Add widgets here to appear in your sidebar.', 'depnet' ),
    'before_widget' => '<section id="%1$s" class="widget %2$s YOUR-CUSTOM-CSS-CLASS">',
    'after_widget'  => '</section>',
    'before_title'  => '<div class="widget-title YOUR-CUSTOM-CSS-CLASS"><h4>',
    'after_title'   => '</h4></div>',
) );
| improve this answer | |

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.