Adding classes to dynamic sidebar

Question

Hey so I am trying to create this conditional that auto creates a grid layout when widgets/sidebars are added and removed. The goal is let the user put in as many widgets as possible without worrying about the layout. This is my code, let me know if you want me to further explain myself:

if (function_exists('create_widget') && dynamic_sidebar('sidebar-1') && dynamic_sidebar('sidebar-2') && dynamic_sidebar('sidebar-3') ) {
            $layout_classes = "col-md-4";
    }       elseif ( is_active_sidebar( 'sidebar-1' ) && is_active_sidebar( 'sidebar-2' ) ) {
                $layout_classes = "col-md-6";
    } else {
            $layout_classes = "col-md-2";
    }

<div class="row"
    <div class="container">
        <div class="col-md-12">
        <div class="<?php echo $layout_classes ?>">

                                <?php dynamic_sidebar( 'sidebar-1'); ?>

                                    <?php dynamic_sidebar( 'sidebar-2'); ?>

                                        <?php dynamic_sidebar( 'sidebar-3'); ?>

</div>
</div>
</div>
</div><!--End Layout Class-->

P.S. Using Bootstrap 3.

Answer 1

You haven't actually said what the problem is. But I can see one for starters - dynamic_sidebar in your if conditions will echo out the widgets immediately. If you want to check a sidebar has widgets, use is_active_sidebar:

is_active_sidebar( 'sidebar-1' ); // True/false

Answer 2

There is an answer here, but it relies on wp_get_sidebars_widgets, which is depreciated as well as private.

This code looks like a better and more robust solution:

It's actually pretty simple. I used it to add classes to my widget's for PureCSS framework.

In this case we want the outer container to have the class pure-g for the "grid". And the inner items to have the class of pure-u-1-*, where the asterisk is the total number of columns, in this case the widget count.

So registering the sidebar:

register_sidebar([
    'name'          => __('Footer Widget Area', 'pure-demo'),
    'id'            => 'sidebar-footer',
    'class'            => 'pure-g',
    // Next line has our callback
    'before_widget'  => '<section class="widget %2$s '. slbd_count_widgets( 'sidebar-footer' ) .'">',
    'after_widget'  => '</section>',
    'before_title'  => '<h3>',
    'after_title'   => '</h3>'
]);

And here's our callback function:

 function slbd_count_widgets( $sidebar_id ) {
  // If loading from front page, consult $_wp_sidebars_widgets rather than options
  // to see if wp_convert_widget_settings() has made manipulations in memory.
  global $_wp_sidebars_widgets;
  if ( empty( $_wp_sidebars_widgets ) ) :
    $_wp_sidebars_widgets = get_option( 'sidebars_widgets', array() );
  endif;

  $sidebars_widgets_count = $_wp_sidebars_widgets;

  if ( isset( $sidebars_widgets_count[ $sidebar_id ] ) ) :
    $widget_count = count( $sidebars_widgets_count[ $sidebar_id ] );
    $widget_classes = '';
    $widget_classes .= 'pure-u-1 pure-u-sm-1-1';
    $widget_classes .= ' pure-u-md-1-' . ceil($widget_count / 2);
    $widget_classes .= ' pure-u-lg-1-' . $widget_count;
    return $widget_classes;
  endif;
}

Then I display it like this:

<footer class="content-info pure-g">
  <?php if ( is_active_sidebar( 'sidebar-footer' ) ) : ?>
      <?php dynamic_sidebar( 'sidebar-footer' ); ?>
  <?php endif; ?>
  <div id="colophon" class="site-footer" role="contentinfo">
  <?php
    if ( has_nav_menu( 'footer_links' ) ) :
       wp_nav_menu(['theme_location' => 'footer_links', 'container_class' => 'pure-menu', 'menu_class' => 'pure-menu-list']);
    endif;
  ?>
  </div>
</footer>

Answer 3

This is an example of adding a custom class to the Widgets Text field:

add_filter( 'dynamic_sidebar_params', [ new Sidebar_Filterer, 'filter' ], 10, 1 );

class Sidebar_Filterer {

    /**
     * @filter dynamic_sidebar_params 10 1
     *
     * @param $param
     *
     * @return mixed
     */
    public function filter( $params ) {
        if ( ! is_array( $params ) || empty( $params ) ) {
            return $params;
        }

        foreach ( $params as &$param ) {
            if ( is_array( $param ) ) {
                $param = $this->filter_text_widget( $param );
            }
        }

        return $params;
    }

    private function filter_text_widget( array $param ): array {
        if ( ! array_key_exists( 'widget_name', $param ) ) {
            return $param;
        }

        if ( $param['widget_name'] != 'Text' ) {
            return $param;
        }

        if ( ! array_key_exists( 'before_widget', $param ) ) {
            return $param;
        }

        if ( strpos( $param['before_widget'], 'widget_text' ) === false ) {
            return $param;
        }

        $param['before_widget'] = str_replace( 'widget_text', 'widget_text some-other-class', $param['before_widget'] );

        return $param;
    }
}