Count widgets in position and set class

(Please be gentle, I’m transitioning from Joomla development.)

I am using Twitter Bootstrap for this client and I would like the “bottom” widget position to work “automatically” for my client as I am used to in Joomla where if there are 2 modules published in a position, then the appropriate classes will be added on each div to make multiple columns. (Ex: each module would be wrapped in a “.col-md-6”, if there are three, then there will be 3 columns because the module would be wrapped in “.col-md-4” etc.)

Read More

I see that I could make a bottom1, bottom2, and bottom3 position and do it that way, but it adds extra confusion for my client. Especially, when I need to have a lot of these positions.

I know WordPress must be able to do this, but I can’t seem to figure it out. (I would use Joomla! but they would like to have a blog for their website and need a custom content types as well.) Any help would be appreciated. Below are the “bits” I have gathered but aren’t making sense how to put them all together. Thank you.

I have this function to register my widget in functions.php:

function my_widgets_init() {
    register_sidebar( array(
        'name' => 'bottom',
        'id' => 'bottom',
        'before_widget' => '<div class="col-xs-6 col-md-4">',
        'after_widget' => '</div>',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ));
}
add_action( 'widgets_init', 'my_widgets_init' );

and this function that does the calculation (found this on Stack Overflow) in functions.php:

function count_sidebar_widgets( $sidebar_id, $echo = true ) {
    $num_widgets = wp_get_sidebars_widgets();
    if( !isset( $num_widgets[$sidebar_id] ) )
        return __( 'Invalid sidebar ID' );
    if( $echo )
        echo count( $num_widgets[$sidebar_id] );
    else
        return count( $num_widgets[$sidebar_id] );
}

My html that displays the widget in index.php:

<?php if( is_active_sidebar('bottom') ) { ?>
    <section class="row">
        <?php dynamic_sidebar('bottom'); ?>
        <?php count_sidebar_widgets( 'bottom' ); ?>
    </section>
<?php } ?>

Thank you for your time and attention.

Related posts

1 comment

  1. I found an answer on this very site that didn’t come up before in search before @ Get number of widgets in sidebar

    function cosmos_bottom_sidebar_params($params) {
    
        $sidebar_id = $params[0]['id'];
    
        if ( $sidebar_id == 'sidebar-bottom' ) {
    
            $total_widgets = wp_get_sidebars_widgets();
            $sidebar_widgets = count($total_widgets[$sidebar_id]);
    
            $params[0]['before_widget'] = str_replace('class="', 'class="span' . floor(12 / $sidebar_widgets) . ' ', $params[0]['before_widget']);
        }
    
        return $params;
    }
    add_filter('dynamic_sidebar_params','cosmos_bottom_sidebar_params');
    

    This is the code I had to use once I modified it for Twitter Bootstrap 3 in functions.php:

    function my_widgets_init() {
        register_sidebar( array(
            'name' => 'bottom',
            'id' => 'bottom',
            'before_widget' => '<div class="">',
            'after_widget' => '</div>',
            'before_title' => '<h3>',
            'after_title' => '</h3>',
        ));
    }
    add_action( 'widgets_init', 'my_widgets_init' );
    
    
    // Dynamic Sidebar Positions
    
        // Bottom
        function cosmos_bottom_sidebar_params($params) {
    
            $sidebar_id = $params[0]['id'];
    
            if ( $sidebar_id == 'bottom' ) {
    
                $total_widgets = wp_get_sidebars_widgets();
                $sidebar_widgets = count($total_widgets[$sidebar_id]);
    
                $params[0]['before_widget'] = str_replace('class="', 'class="col-md-' . floor(12 / $sidebar_widgets) . ' ', $params[0]['before_widget']);
            }
    
            return $params;
        }
        add_filter('dynamic_sidebar_params','cosmos_bottom_sidebar_params');
    

Comments are closed.