Home » Wordpress » How to add class to <ul> and childs <li> of sidebar widget – WordPress

How to add class to <ul> and childs <li> of sidebar widget – WordPress

Posted by: admin November 30, 2017 Leave a comment

Questions:

This is how I register the menus on my right sidebar:

if(function_exists('register_sidebar')){
  register_sidebar(array(
            'name'=>'sidebar_default',
            'before_widget' => '<div class="panel panel-info">',
            'after_widget' => '</div>',
            'before_title' => '<div class="panel-heading"><h4>',
            'after_title' => '</h4></div>'
        ));
 }

And this is the output:

<div class="panel panel-info">
   <div class="panel-heading">
      <h4>Title</h4>
   </div>
<div class="menu-openings-menu-container">
    <ul id="menu-openings-menu" class="menu">
       <li id="" class="menu-item-object-page menu-item-381"><a href="">Software</a></li>
       <li id="" class="menu-item-object-page menu-item-382"><a href="">Software</a></li>
       <li id="" class="menu-item-object-page menu-item-383"><a href="">Software</a></li>
       <li id="" class="menu-item-object-page menu-item-384"><a href="">Software</a></li>
       <li id="" class="menu-item-object-page menu-item-385"><a href="">Software</a></li>
    </ul>
</div>
</div>

and this is how do it need the output to be able to use Twitter Bootstrap list-styles styles:

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

I appreciate all suggestions. Thanks.

output

Source code

Answers:

According to the WordPress function reference, you can just add a 'class' => 'list-group', property to your passed options, like this:

if(function_exists('register_sidebar')){
    register_sidebar(array(
        'name'=>'sidebar_default',
        'before_widget' => '<div class="panel panel-info">',
        'after_widget' => '</div>',
        'before_title' => '<div class="panel-heading"><h4>',
        'after_title' => '</h4></div>',
        'class' => 'list-group'
    ));
}

This should set the class of the ul.
I’m not sure if you can also set the class for the individual li‘s, but those can be accessed through the ul
(ul.list-group li in css)

Questions:
Answers:

This is only for backend 🙁

    class - CSS class to assign to the Sidebar in the Appearance -> Widget admin page. This class will only appear in the source of the WordPress Widget admin page. It will not be included in the frontend of your website. Note: The value "sidebar" will be prepended to the class value. For example, a class of "tal" will result in a class value of "sidebar-tal". (default: empty).
before_widget - HTML to place before every widget(default: '<li id="%1$s" class="widget %2$s">') Note: uses sprintf for variable substitution