I have assigned a Sidebar into functions.php:

        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 class="widget-container widget_calendar" id="calendar-2">
            Calendar Widget
        <li class="widget-container widget_meta" id="meta-3">
            Meta Widget

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.

  • Can you please check and confirm if the id of the widget area is mismatched? You have registered it as 'id' => 'footer_widgets_area', and the html is id="footer-widget-area". Nov 5, 2013 at 11:53
  • @MarutiMohanty thanks for your concern. If you recall the register_sidebar() correctly, it's nothing to connect both of them here. the 'id' => 'footer_widgets_area', is to call the dynamic_sidebar('footer_widgets_area'), and the id="footer-widget-area" is hard-coded. Nov 5, 2013 at 13:17

1 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 ) ) { 
  • Huge work! But I'm afraid Subharanjan, it's not working. I actually am not a PHP developer, just a novice there, so can't actually understand all the syntax used in this function. So I made no change, just added it into functions.php, it's not working. Not taking any class into my desired <li>, not in anywhere. Nov 5, 2013 at 13:25
  • prntscr.com/222lc3 Can you check by looking into the HTML source code if that new classes gets added ? Can you provide any link where you are checking these ? ( if possible ) :) Nov 5, 2013 at 13:31
  • 2
    Please explain why code works, rather than just posting a block of code. What does the code accomplish, and why does it work to solve the OP's problem? Nov 5, 2013 at 14:21
  • 1
    @ChipBennett: sure !! As Mayeenul is trying to add dynamic classes based upon the widget count and widget index for a particular sidebar, he needs to use the filter hook "dynamic_sidebar_params" to add new classes. Nov 5, 2013 at 14:32
  • 1
    Please edit your answer to add clarifying details. They'll get lost here in the comments. Nov 5, 2013 at 14:35

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.