I want to assign a new CSS class to default widget <ul> in Page/Post creating page in WordPress. How can I do this?

See the image below.

enter image description here


3 Answers 3


Don't edit your parent theme's functions.php file.

register_sidebar( array(
    'name'          => __( 'Sidebar name', 'theme_text_domain' ),
    'id'            => 'unique-sidebar-id',
    'description'   => '',
    'class'         => 'add class here',
    'before_widget' => '<li id="%1$s" class="widget %2$s">',
    'after_widget'  => '</li>',
    'before_title'  => '<h2 class="widgettitle">',
    'after_title'   => '</h2>'
) );

Copy it over to your child theme's functions.php and make the changes there, or simply register a new widget.

You could then hook it in from your child theme's functions.php like this:

add_action( 'your_hook', 'new_widget' );
function new_widget() {
    if ( is_your_conditional_tag() && is_active_sidebar( 'new-widget' ) ) { 
        dynamic_sidebar( 'new-widget', array(       
            'before' => '<div class="new-widget">',
            'after' => '</div>'
        ) );

You can also add more classes to the dynamic_sidebar function.

  • This doesn't work. The class gets added in the admin interface, not on the frontend. Jan 29, 2020 at 1:10
  • Make sure you swap out your_hook with a theme specific or WordPress hook and also swap out the conditional tag with a working conditional tag, Apr 19, 2021 at 13:00

Go to your function.php and find your widget code

You must add or edit that class parameters in your sidebar code like that 'class' => 'new-class',

It would be like that:

  'name' => __( 'Right Hand Sidebar' ),
  'id' => 'right-sidebar',
  'class'       => 'new-class',
  'description' => __( 'Widgets in this area will be shown on the right-hand side.' ),
  'before_title' => '<h1>',
  'after_title' => '</h1>'

You must check out Wordpress Codex for more usage


you had written wrong question. its not on widget but on post/page description.

AS per codex you needs to add extra styles to css file. you can add class via code but this is better solution. see this codex link for details

Styling Lists

#content ul {margin: 0.3em 1em; list-style-position: outside; list-style:url(ball.gif) disc; font-size:98%}
#content ul ul {margin-top: 0.3em; list-style:url(bullet.gif) square; font-size:96%}
#content ul ul ul {margin-top: 0.3em; list-style:url(ball1.gif) circle; font-size:98%}
#content li, #content li li, #content li li li {padding:0.25px 10px 5px 0.25em}

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.