How can I add a new CSS class to a widget?

Question

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.

Answer 1

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.

Answer 2

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:

register_sidebar(array(
  '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

Answer 3

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}