How to pass a special CSS class into widget li

Question

I have assigned a Sidebar into functions.php:

register_sidebar(
        array (
            'name' => 'Footer Widgets Area',
            'id' => 'footer_widgets_area',
            'description' => 'Assign Maximum 3 widgets into this footer sidebar area.',
            'class' => 'my-class',
            'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
            'after_widget' => "</li>",
            'before_title' => '<h3 class="widget-title">',
            'after_title' => '</h3>'
        )
    );

In footer I want to load specific CSS class into the widget container after the amount of widgets activated. So I used this:

            $our_sidebar = wp_get_sidebars_widgets();
            $widget_counter = count( $our_sidebar['footer_widgets_area'] );

            if( $widget_counter == 1 ) {
                $the_class = ' widen-full';
            } elseif( $widget_counter == 2 ){
                $the_class = ' widen-duo';
            } else {
                $the_class = ' widen-trio';
            }

What my footer is loading now is:

<div class="widget-area" id="footer-widget-area">
    <ul class="xoxo">
        <li class="widget-container widget_archive" id="archives-2">
            <h3 class="widget-title">Archives</h3>
            Archive Widget Content
        </li>
        <li class="widget-container widget_calendar" id="calendar-2">
            Calendar Widget
        </li>
        <li class="widget-container widget_meta" id="meta-3">
            Meta Widget
        </li>
    </ul>
</div>

Please note that if I can echo my class $the_class into the <li> then my problem is solved.

<li class="widget-container widget_archive" id="archives-2">

Though I work a lot with WordPress, but I'm afraid of hooks and filters, and in most of the cases I understand them a little. It'd be my better achievement, if somebody can NOT just provide me a solution, but EXPLAIN the process associated with this. Then it'd be my future achievement.

PS: Somehow, the class defined in register_sidebar() is not echoing. I don't know why.

Answer 1

function widget_display_callback( $params ) {

    global $wp_registered_widgets;
    global $my_widget_num; // Global a counter array    

    $id = $params[0]['widget_id'];
    $sidebar_id = $params[0]['id'];

    /*  Set some count for each widgets  */
    if( !$my_widget_num ) { // If the counter array doesn't exist, create it
        $my_widget_num = array();
    }

    if( isset( $my_widget_num[ $sidebar_id ] ) ) { // See if the counter array has an entry for this sidebar
        $my_widget_num[ $sidebar_id ] ++;
    } else { // If not, create it starting with 1
        $my_widget_num[ $sidebar_id ] = 1;
    }

    $widget_counter = $my_widget_num[ $sidebar_id ];
    if( $widget_counter == 1 ) {
        $the_class = ' widen-full ';
    } elseif( $widget_counter == 2 ){
        $the_class = ' widen-duo ';
    } else {
        $the_class = ' widen-trio ';
    }   

    if ( !empty( $sidebar_id ) && $sidebar_id == 'footer_widgets_area' && !empty( $the_class ) ) {
        // add  your classes
        $classe_to_add = ' ' . $the_class . ' '; // make sure you leave a space at the end
        $classe_to_add = 'class=" ' . $classe_to_add;
        $params[0]['before_widget'] = str_replace( 'class="', $classe_to_add, $params[0]['before_widget'] );
    }
    return $params;
}
add_filter( 'dynamic_sidebar_params', 'widget_display_callback', 10 );

Basically you need to use the 'dynamic_sidebar_params' hook to add new classes into each widget on the fly. I have implemented the same above to find the widgets count and the index of the widgets inside a sidebar( for your case its: footer_widgets_area ). Try adding these code on active themes function.php file and check if this works for you !!

You have to replace the sidebar id in this line

if ( !empty( $sidebar_id ) && $sidebar_id == 'footer_widgets_area' && !empty( $the_class ) ) {