2

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.

0
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
2
  • okay just added the is_active_sidebar( 'sidebar-1') etc...the solution im trying to get is, I want to apply those $layout_classes to the row/col-md-12 when sidebars are added and removed. Right now the changes to just one sidebar and it forces them to get laid vertically. I want to achieve a horizontal grid May 6 '16 at 16:24
  • I think i get how to apply the condition. I just don't understand how to set up boostrap to get the desired grid when sidebars are add and removed May 6 '16 at 16:30
0

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>
0

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;
    }
}
1
  • Just a note... The "dynamic_sidebar_params" filter does run in the admin as well. So if you only want to target the front end be sure to add some extra checks so you are only running the code when needed.
    – WPExplorer
    Apr 30 '20 at 5:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.