The newest version of Bootstrap (v3.0) adds a new List Group component which has the following structure:

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



I would like to be able to add a class to the ul (i.e. &lt;ul class="list-group"&gt;)
I would like to style my Category sidebar widget to support this new component, but as you see, this requires classes on each li item.


In reading some similar posts, one option I found is to use jQuery to add the class to each li, but I am concerned about the dreaded FOUC. 

Is there some WordPress function that gets me to my goal?

Please advise,

Update: 

I was able to add classes to the individual li's by creating a Custom Walker which extends Walker_Category (see code below), but this still does not get me to the ul which also needs a class added (eg &lt;ul class="list-group"&gt;). 

class Walker_Category_BS extends Walker_Category {
    function start_el( &amp;$output, $category, $depth = 0, $args = array() ) {
        extract($args);

        $cat_name = esc_attr( $category-&gt;name );
        $cat_name = apply_filters( 'list_cats', $cat_name, $category );
        $link = '&lt;a href="' . esc_url( get_term_link($category) ) . '" ';
        if ( $use_desc_for_title == 0 || empty($category-&gt;description) )
            $link .= 'title="' . esc_attr( sprintf(__( 'View all posts filed under %s' ), $cat_name) ) . '"';
        else
            $link .= 'title="' . esc_attr( strip_tags( apply_filters( 'category_description', $category-&gt;description, $category ) ) ) . '"';
        $link .= '&gt;';
        $link .= $cat_name . '&lt;/a&gt;';

        if ( !empty($feed_image) || !empty($feed) ) {
            $link .= ' ';

            if ( empty($feed_image) )
                $link .= '(';

            $link .= '&lt;a href="' . esc_url( get_term_feed_link( $category-&gt;term_id, $category-&gt;taxonomy, $feed_type ) ) . '"';

            if ( empty($feed) ) {
                $alt = ' alt="' . sprintf(__( 'Feed for all posts filed under %s' ), $cat_name ) . '"';
            } else {
                $title = ' title="' . $feed . '"';
                $alt = ' alt="' . $feed . '"';
                $name = $feed;
                $link .= $title;
            }

            $link .= '&gt;';

            if ( empty($feed_image) )
                $link .= $name;
            else
                $link .= "&lt;img src='$feed_image'$alt$title" . ' /&gt;';

            $link .= '&lt;/a&gt;';

            if ( empty($feed_image) )
                $link .= ')';
        }

        if ( !empty($show_count) )
            $link .= ' (' . intval($category-&gt;count) . ')';

        if ( 'list' == $args['style'] ) {
            $output .= "\t&lt;li";
            $class = 'list-group-item cat-item cat-item-' . $category-&gt;term_id;
            if ( !empty($current_category) ) {
                $_current_category = get_term( $current_category, $category-&gt;taxonomy );
                if ( $category-&gt;term_id == $current_category )
                    $class .=  ' current-cat';
                elseif ( $category-&gt;term_id == $_current_category-&gt;parent )
                    $class .=  ' current-cat-parent';
            }
            $output .=  ' class="' . $class . '"';
            $output .= "&gt;$link\n";
        } else {
            $output .= "\t$link&lt;br /&gt;\n";
        }
    } /* end start_el */

} /* end Walker_Category_BS */


Update 02: 

After viewing default-widgets.php in the core, I decided to create a new widget (WP_Widget_Categories_BS, see code below) wherein I basically, copied all the code from the default category widget and simply modified the the UL to add the necessary class. 

&lt;?php 

/**
 * Categories widget class
 *
 * @since 2.8.0
 */
class WP_Widget_Categories_BS extends WP_Widget {

    function __construct() {
        $widget_ops = array( 'classname' =&gt; 'widget_categories_bs', 'description' =&gt; __( "A list or dropdown of categories for Bootstrap 3.0" ) );
        parent::__construct('categories', __('Boostrap Categories'), $widget_ops);
    }

    function widget( $args, $instance ) {
        extract( $args );

        $title = apply_filters('widget_title', empty( $instance['title'] ) ? __( 'Categories' ) : $instance['title'], $instance, $this-&gt;id_base);
        $c = ! empty( $instance['count'] ) ? '1' : '0';
        $h = ! empty( $instance['hierarchical'] ) ? '1' : '0';
        $d = ! empty( $instance['dropdown'] ) ? '1' : '0';

        echo $before_widget;
        if ( $title )
            echo $before_title . $title . $after_title;

        $cat_args = array('orderby' =&gt; 'name', 'show_count' =&gt; $c, 'hierarchical' =&gt; $h);
        if ( $d ) {
            $cat_args['show_option_none'] = __('Select Category');
            wp_dropdown_categories(apply_filters('widget_categories_dropdown_args', $cat_args));
?&gt;

&lt;script type='text/javascript'&gt;
/* &lt;![CDATA[ */
    var dropdown = document.getElementById("cat");
    function onCatChange() {
        if ( dropdown.options[dropdown.selectedIndex].value &gt; 0 ) {
            location.href = "&lt;?php echo home_url(); ?&gt;/?cat="+dropdown.options[dropdown.selectedIndex].value;
        }
    }
    dropdown.onchange = onCatChange;
/* ]]&gt; */
&lt;/script&gt;

&lt;?php
        } else {
?&gt;
        &lt;ul class="list-group"&gt;
&lt;?php
        $cat_args['title_li'] = '';
        wp_list_categories(apply_filters('widget_categories_args', $cat_args));
?&gt;
        &lt;/ul&gt;
&lt;?php
        }

        echo $after_widget;
    }

    function update( $new_instance, $old_instance ) {
        $instance = $old_instance;
        $instance['title'] = strip_tags($new_instance['title']);
        $instance['count'] = !empty($new_instance['count']) ? 1 : 0;
        $instance['hierarchical'] = !empty($new_instance['hierarchical']) ? 1 : 0;
        $instance['dropdown'] = !empty($new_instance['dropdown']) ? 1 : 0;

        return $instance;
    }

    function form( $instance ) {
        //Defaults
        $instance = wp_parse_args( (array) $instance, array( 'title' =&gt; '') );
        $title = esc_attr( $instance['title'] );
        $count = isset($instance['count']) ? (bool) $instance['count'] :false;
        $hierarchical = isset( $instance['hierarchical'] ) ? (bool) $instance['hierarchical'] : false;
        $dropdown = isset( $instance['dropdown'] ) ? (bool) $instance['dropdown'] : false;
?&gt;
        &lt;p&gt;&lt;label for="&lt;?php echo $this-&gt;get_field_id('title'); ?&gt;"&gt;&lt;?php _e( 'Title:' ); ?&gt;&lt;/label&gt;
        &lt;input class="widefat" id="&lt;?php echo $this-&gt;get_field_id('title'); ?&gt;" name="&lt;?php echo $this-&gt;get_field_name('title'); ?&gt;" type="text" value="&lt;?php echo $title; ?&gt;" /&gt;&lt;/p&gt;

        &lt;p&gt;&lt;input type="checkbox" class="checkbox" id="&lt;?php echo $this-&gt;get_field_id('dropdown'); ?&gt;" name="&lt;?php echo $this-&gt;get_field_name('dropdown'); ?&gt;"&lt;?php checked( $dropdown ); ?&gt; /&gt;
        &lt;label for="&lt;?php echo $this-&gt;get_field_id('dropdown'); ?&gt;"&gt;&lt;?php _e( 'Display as dropdown' ); ?&gt;&lt;/label&gt;&lt;br /&gt;

        &lt;input type="checkbox" class="checkbox" id="&lt;?php echo $this-&gt;get_field_id('count'); ?&gt;" name="&lt;?php echo $this-&gt;get_field_name('count'); ?&gt;"&lt;?php checked( $count ); ?&gt; /&gt;
        &lt;label for="&lt;?php echo $this-&gt;get_field_id('count'); ?&gt;"&gt;&lt;?php _e( 'Show post counts' ); ?&gt;&lt;/label&gt;&lt;br /&gt;

        &lt;input type="checkbox" class="checkbox" id="&lt;?php echo $this-&gt;get_field_id('hierarchical'); ?&gt;" name="&lt;?php echo $this-&gt;get_field_name('hierarchical'); ?&gt;"&lt;?php checked( $hierarchical ); ?&gt; /&gt;
        &lt;label for="&lt;?php echo $this-&gt;get_field_id('hierarchical'); ?&gt;"&gt;&lt;?php _e( 'Show hierarchy' ); ?&gt;&lt;/label&gt;&lt;/p&gt;
&lt;?php
    }

} // end WP_Widget_Categories_BS


Combined with a Custom Walker I created (Walker_Category_BS) I now have what I wanted. 

Analysis

Is this the best way to do it? Don't know as I have have received zero feedback so far, and this is the first time i've done this (hence the question), but ...it works! I could use a review.

Debug Warning

Concerning my Custom Category Walker Walker_Category_BS, i'm seeing this message


  "Strict standards: Declaration of Walker_Category_BS::start_el() should be compatible with Walker::start_el(&amp;$output, $object, $depth = 0, $args = Array, $current_object_id = 0) in C:\wamp\www\mysite\wp-content\themes\mytheme\assets\inc\Walker_Category_BS.php"


It appears to be a warning, of some sort.


Question: How can I look up which server an application is running on?
Answer: Find it in your CMDB :-)

It is the best general answer. If your response is "What's that?" or "We don't have one", it's time to start building it - as voretaq7 said. If the answers are all only in other people's heads, start writing their answers down.