Today is a day to show you how to split widgets into columns using Bootstrap 3.  There will be PHP and CSS code to make it work.

PHP code that needs to be inserted into a functions.php file in your theme.

if ( ! class_exists( 'wpi_Widget_Cols' ) ) {
    class wpi_Widget_Cols {

        /**
         * Display widget size field
         *
         * @param  object $widget
         */
        public static function displayField( $widget, $return, $instance ) {

            if ( ! isset( $instance['wpi_widget_size_lg'] ) ) {
                $instance['wpi_widget_size_lg'] = null;
            }
            if ( ! isset( $instance['wpi_widget_size_md'] ) ) {
                $instance['wpi_widget_size_md'] = null;
            }
            if ( ! isset( $instance['wpi_widget_size_sm'] ) ) {
                $instance['wpi_widget_size_sm'] = null;
            }
            if ( ! isset( $instance['wpi_widget_size_xs'] ) ) {
                $instance['wpi_widget_size_xs'] = null;
            }

            $row = "<div>";
            $row .= "<p><label for='widget-{$widget->id_base}-{$widget->number}-wpi_widget_size'>" . apply_filters( 'widget_css_classes', esc_html__( 'Widget Size', 'wpi-lang' ) ) . ":</label> <small>(<a href='https://www.pixelemu.com/blog/tutorials/how-to-use-bootstrap-grid-system-with-wordpress-theme' target='_blank' title='" . esc_html__( 'More details about grid', 'wpi-lang' ) . "'>?</a>)</small></p>";
            //col-lg
            $row .= "<p style='display: inline-block; vertical-align: top; margin-top: 0;'><small style='display: block;'>" . esc_html__( 'Large Desktop ( &ge; 1200px )', 'wpi-lang' ) . "</small>";
            $row .= "<select style='min-width: 155px;' name='widget-{$widget->id_base}[{$widget->number}][wpi_widget_size_lg]' id='widget-{$widget->id_base}-{$widget->number}-wpi_widget_size_lg'>";
            $row .= "<option value=''> " . esc_html__( 'auto', 'wpi-lang' ) . " </option>";
            for ( $i = 12; $i > 0; $i -- ) {
                $percentage = floor( 100 / ( 12 / $i ) );
                $row        .= "<option value='col-lg-" . $i . "' " . selected( $instance['wpi_widget_size_lg'], 'col-lg-' . $i, false ) . ">" . $percentage . "% - col-lg-" . $i . "</option>";
            }
            $row .= "</select></p>";
            //col-md
            $row .= "<p style='display: inline-block; vertical-align: top; margin-top: 0;'><small style='display: block;'>" . esc_html__( 'Desktop ( &ge; 992px )', 'wpi-lang' ) . "</small>";
            $row .= "<select style='min-width: 155px;' name='widget-{$widget->id_base}[{$widget->number}][wpi_widget_size_md]' id='widget-{$widget->id_base}-{$widget->number}-wpi_widget_size_md'>";
            $row .= "<option value='' " . selected( $instance['wpi_widget_size_md'], '', false ) . "> " . esc_html__( 'auto', 'wpi-lang' ) . " </option>";
            for ( $i = 12; $i > 0; $i -- ) {
                $percentage = floor( 100 / ( 12 / $i ) );
                $row        .= "<option value='col-md-" . $i . "' " . selected( $instance['wpi_widget_size_md'], 'col-md-' . $i, false ) . ">" . $percentage . "% - col-md-" . $i . "</option>";
            }
            $row .= "</select></p>";
            //col-sm
            $row .= "<p style='display: inline-block; vertical-align: top; margin-top: 0;'><small style='display: block;'>" . esc_html__( 'Tablet ( &ge; 768px )', 'wpi-lang' ) . "</small>";
            $row .= "<select style='min-width: 155px;' name='widget-{$widget->id_base}[{$widget->number}][wpi_widget_size_sm]' id='widget-{$widget->id_base}-{$widget->number}-wpi_widget_size_sm'>";
            $row .= "<option value=''> " . esc_html__( 'auto', 'wpi-lang' ) . " </option>";
            for ( $i = 12; $i > 0; $i -- ) {
                $percentage = floor( 100 / ( 12 / $i ) );
                $row        .= "<option value='col-sm-" . $i . "' " . selected( $instance['wpi_widget_size_sm'], 'col-sm-' . $i, false ) . ">" . $percentage . "% - col-sm-" . $i . "</option>";
            }
            $row .= "</select></p>";
            //col-xs
            $row .= "<p style='display: inline-block; vertical-align: top; margin-top: 0;'><small style='display: block;'>" . esc_html__( 'Phone ( &lt; 768px )', 'wpi-lang' ) . "</small>";
            $row .= "<select style='min-width: 155px;' name='widget-{$widget->id_base}[{$widget->number}][wpi_widget_size_xs]' id='widget-{$widget->id_base}-{$widget->number}-wpi_widget_size_xs'>";
            $row .= "<option value=''> " . esc_html__( 'auto', 'wpi-lang' ) . " </option>";
            for ( $i = 12; $i > 0; $i -- ) {
                $percentage = floor( 100 / ( 12 / $i ) );
                $row        .= "<option value='col-xs-" . $i . "' " . selected( $instance['wpi_widget_size_xs'], 'col-xs-' . $i, false ) . ">" . $percentage . "% - col-xs-" . $i . "</option>";
            }
            $row .= "</select></p>";
            $row .= "</div>";

            echo $row;

            return $instance;
        }

        /**
         * Widget update settings
         */
        public static function widgetUpdate( $instance, $new_instance ) {
            $instance['wpi_widget_size_xs'] = $new_instance['wpi_widget_size_xs'];
            $instance['wpi_widget_size_sm'] = $new_instance['wpi_widget_size_sm'];
            $instance['wpi_widget_size_md'] = $new_instance['wpi_widget_size_md'];
            $instance['wpi_widget_size_lg'] = $new_instance['wpi_widget_size_lg'];

            return $instance;
        }

        /**
         * Update widgets params
         *
         * @param  array $params
         *
         * @return array
         */
        public static function sidebarParams( $params ) {
            global $wp_registered_widgets;
            $widget_id    = $params[0]['widget_id'];
            $widget_obj   = $wp_registered_widgets[ $widget_id ];
            $widget_opt   = get_option( $widget_obj['callback'][0]->option_name );
            $widget_num   = $widget_obj['params'][0]['number'];
            $widget_class = array();

            if ( ! empty( $widget_opt[ $widget_num ]['wpi_widget_size_xs'] ) ) {
                $widget_class[] = $widget_opt[ $widget_num ]['wpi_widget_size_xs'];
            }
            if ( ! empty( $widget_opt[ $widget_num ]['wpi_widget_size_sm'] ) ) {
                $widget_class[] = $widget_opt[ $widget_num ]['wpi_widget_size_sm'];
            }
            if ( ! empty( $widget_opt[ $widget_num ]['wpi_widget_size_md'] ) ) {
                $widget_class[] = $widget_opt[ $widget_num ]['wpi_widget_size_md'];
            }
            if ( ! empty( $widget_opt[ $widget_num ]['wpi_widget_size_lg'] ) ) {
                $widget_class[] = $widget_opt[ $widget_num ]['wpi_widget_size_lg'];
            }

            if ( ! empty( $widget_opt[ $widget_num ]['wpi_cols'] ) ) {
                $widget_custom_class = $widget_opt[ $widget_num ]['wpi_cols'];
                $widget_custom_class = preg_replace( '/\s\s+/', ' ', $widget_custom_class );
                $widget_custom_class = explode( ' ', $widget_custom_class );
                $widget_class        = array_merge( $widget_class, $widget_custom_class );
            }

            $widget_class = array_map( 'sanitize_html_class', $widget_class );
            $widget_class = implode( ' ', $widget_class ); //array to string

            $params[0]['before_widget'] = preg_replace( '/class="/', "class=\"{$widget_class} ", $params[0]['before_widget'], 1 );

            return $params;
        }

    }
}

if ( is_admin() ) {
    add_filter( 'in_widget_form', array( 'wpi_Widget_Cols', 'displayField' ), 10, 3 );
    add_filter( 'widget_update_callback', array( 'wpi_Widget_Cols', 'widgetUpdate' ), 10, 2 );
} else {
    add_filter( 'dynamic_sidebar_params', array( 'wpi_Widget_Cols', 'sidebarParams' ) );
}

The second part is a CSS code – add it into a style.css file in your theme.

.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12 {
  float: left;
}
.col-xs-1 {
  width: 8.333333333333332%;
}
.col-xs-2 {
  width: 16.666666666666664%;
}
.col-xs-3 {
  width: 25%;
}
.col-xs-4 {
  width: 33.33333333333333%;
}
.col-xs-5 {
  width: 41.66666666666667%;
}
.col-xs-6 {
  width: 50%;
}
.col-xs-7 {
  width: 58.333333333333336%;
}
.col-xs-8 {
  width: 66.66666666666666%;
}
.col-xs-9 {
  width: 75%;
}
.col-xs-10 {
  width: 83.33333333333334%;
}
.col-xs-11 {
  width: 91.66666666666666%;
}
.col-xs-12 {
  width: 100%;
}
@media (min-width: 768px) {
  .col-sm-1,
  .col-sm-2,
  .col-sm-3,
  .col-sm-4,
  .col-sm-5,
  .col-sm-6,
  .col-sm-7,
  .col-sm-8,
  .col-sm-9,
  .col-sm-10,
  .col-sm-11,
  .col-sm-12 {
    float: left;
  }
  .col-sm-1 {
    width: 8.333333333333332%;
  }
  .col-sm-2 {
    width: 16.666666666666664%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-4 {
    width: 33.33333333333333%;
  }
  .col-sm-5 {
    width: 41.66666666666667%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-7 {
    width: 58.333333333333336%;
  }
  .col-sm-8 {
    width: 66.66666666666666%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-10 {
    width: 83.33333333333334%;
  }
  .col-sm-11 {
    width: 91.66666666666666%;
  }
  .col-sm-12 {
    width: 100%;
  }
  .col-sm-push-1 {
    left: 8.333333333333332%;
  }
  .col-sm-push-2 {
    left: 16.666666666666664%;
  }
  .col-sm-push-3 {
    left: 25%;
  }
  .col-sm-push-4 {
    left: 33.33333333333333%;
  }
  .col-sm-push-5 {
    left: 41.66666666666667%;
  }
  .col-sm-push-6 {
    left: 50%;
  }
  .col-sm-push-7 {
    left: 58.333333333333336%;
  }
  .col-sm-push-8 {
    left: 66.66666666666666%;
  }
  .col-sm-push-9 {
    left: 75%;
  }
  .col-sm-push-10 {
    left: 83.33333333333334%;
  }
  .col-sm-push-11 {
    left: 91.66666666666666%;
  }
  .col-sm-pull-1 {
    right: 8.333333333333332%;
  }
  .col-sm-pull-2 {
    right: 16.666666666666664%;
  }
  .col-sm-pull-3 {
    right: 25%;
  }
  .col-sm-pull-4 {
    right: 33.33333333333333%;
  }
  .col-sm-pull-5 {
    right: 41.66666666666667%;
  }
  .col-sm-pull-6 {
    right: 50%;
  }
  .col-sm-pull-7 {
    right: 58.333333333333336%;
  }
  .col-sm-pull-8 {
    right: 66.66666666666666%;
  }
  .col-sm-pull-9 {
    right: 75%;
  }
  .col-sm-pull-10 {
    right: 83.33333333333334%;
  }
  .col-sm-pull-11 {
    right: 91.66666666666666%;
  }
  .col-sm-offset-1 {
    margin-left: 8.333333333333332%;
  }
  .col-sm-offset-2 {
    margin-left: 16.666666666666664%;
  }
  .col-sm-offset-3 {
    margin-left: 25%;
  }
  .col-sm-offset-4 {
    margin-left: 33.33333333333333%;
  }
  .col-sm-offset-5 {
    margin-left: 41.66666666666667%;
  }
  .col-sm-offset-6 {
    margin-left: 50%;
  }
  .col-sm-offset-7 {
    margin-left: 58.333333333333336%;
  }
  .col-sm-offset-8 {
    margin-left: 66.66666666666666%;
  }
  .col-sm-offset-9 {
    margin-left: 75%;
  }
  .col-sm-offset-10 {
    margin-left: 83.33333333333334%;
  }
  .col-sm-offset-11 {
    margin-left: 91.66666666666666%;
  }
}
@media (min-width: 992px) {
  .col-md-1,
  .col-md-2,
  .col-md-3,
  .col-md-4,
  .col-md-5,
  .col-md-6,
  .col-md-7,
  .col-md-8,
  .col-md-9,
  .col-md-10,
  .col-md-11,
  .col-md-12 {
    float: left;
  }
  .col-md-1 {
    width: 8.333333333333332%;
  }
  .col-md-2 {
    width: 16.666666666666664%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-4 {
    width: 33.33333333333333%;
  }
  .col-md-5 {
    width: 41.66666666666667%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-7 {
    width: 58.333333333333336%;
  }
  .col-md-8 {
    width: 66.66666666666666%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-10 {
    width: 83.33333333333334%;
  }
  .col-md-11 {
    width: 91.66666666666666%;
  }
  .col-md-12 {
    width: 100%;
  }
  .col-md-push-0 {
    left: auto;
  }
  .col-md-push-1 {
    left: 8.333333333333332%;
  }
  .col-md-push-2 {
    left: 16.666666666666664%;
  }
  .col-md-push-3 {
    left: 25%;
  }
  .col-md-push-4 {
    left: 33.33333333333333%;
  }
  .col-md-push-5 {
    left: 41.66666666666667%;
  }
  .col-md-push-6 {
    left: 50%;
  }
  .col-md-push-7 {
    left: 58.333333333333336%;
  }
  .col-md-push-8 {
    left: 66.66666666666666%;
  }
  .col-md-push-9 {
    left: 75%;
  }
  .col-md-push-10 {
    left: 83.33333333333334%;
  }
  .col-md-push-11 {
    left: 91.66666666666666%;
  }
  .col-md-pull-0 {
    right: auto;
  }
  .col-md-pull-1 {
    right: 8.333333333333332%;
  }
  .col-md-pull-2 {
    right: 16.666666666666664%;
  }
  .col-md-pull-3 {
    right: 25%;
  }
  .col-md-pull-4 {
    right: 33.33333333333333%;
  }
  .col-md-pull-5 {
    right: 41.66666666666667%;
  }
  .col-md-pull-6 {
    right: 50%;
  }
  .col-md-pull-7 {
    right: 58.333333333333336%;
  }
  .col-md-pull-8 {
    right: 66.66666666666666%;
  }
  .col-md-pull-9 {
    right: 75%;
  }
  .col-md-pull-10 {
    right: 83.33333333333334%;
  }
  .col-md-pull-11 {
    right: 91.66666666666666%;
  }
  .col-md-offset-0 {
    margin-left: 0;
  }
  .col-md-offset-1 {
    margin-left: 8.333333333333332%;
  }
  .col-md-offset-2 {
    margin-left: 16.666666666666664%;
  }
  .col-md-offset-3 {
    margin-left: 25%;
  }
  .col-md-offset-4 {
    margin-left: 33.33333333333333%;
  }
  .col-md-offset-5 {
    margin-left: 41.66666666666667%;
  }
  .col-md-offset-6 {
    margin-left: 50%;
  }
  .col-md-offset-7 {
    margin-left: 58.333333333333336%;
  }
  .col-md-offset-8 {
    margin-left: 66.66666666666666%;
  }
  .col-md-offset-9 {
    margin-left: 75%;
  }
  .col-md-offset-10 {
    margin-left: 83.33333333333334%;
  }
  .col-md-offset-11 {
    margin-left: 91.66666666666666%;
  }
}
@media (min-width: 1200px) {
  .col-lg-1,
  .col-lg-2,
  .col-lg-3,
  .col-lg-4,
  .col-lg-5,
  .col-lg-6,
  .col-lg-7,
  .col-lg-8,
  .col-lg-9,
  .col-lg-10,
  .col-lg-11,
  .col-lg-12 {
    float: left;
  }
  .col-lg-1 {
    width: 8.333333333333332%;
  }
  .col-lg-2 {
    width: 16.666666666666664%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-4 {
    width: 33.33333333333333%;
  }
  .col-lg-5 {
    width: 41.66666666666667%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-7 {
    width: 58.333333333333336%;
  }
  .col-lg-8 {
    width: 66.66666666666666%;
  }
  .col-lg-9 {
    width: 75%;
  }
  .col-lg-10 {
    width: 83.33333333333334%;
  }
  .col-lg-11 {
    width: 91.66666666666666%;
  }
  .col-lg-12 {
    width: 100%;
  }
  .col-lg-push-0 {
    left: auto;
  }
  .col-lg-push-1 {
    left: 8.333333333333332%;
  }
  .col-lg-push-2 {
    left: 16.666666666666664%;
  }
  .col-lg-push-3 {
    left: 25%;
  }
  .col-lg-push-4 {
    left: 33.33333333333333%;
  }
  .col-lg-push-5 {
    left: 41.66666666666667%;
  }
  .col-lg-push-6 {
    left: 50%;
  }
  .col-lg-push-7 {
    left: 58.333333333333336%;
  }
  .col-lg-push-8 {
    left: 66.66666666666666%;
  }
  .col-lg-push-9 {
    left: 75%;
  }
  .col-lg-push-10 {
    left: 83.33333333333334%;
  }
  .col-lg-push-11 {
    left: 91.66666666666666%;
  }
  .col-lg-pull-0 {
    right: auto;
  }
  .col-lg-pull-1 {
    right: 8.333333333333332%;
  }
  .col-lg-pull-2 {
    right: 16.666666666666664%;
  }
  .col-lg-pull-3 {
    right: 25%;
  }
  .col-lg-pull-4 {
    right: 33.33333333333333%;
  }
  .col-lg-pull-5 {
    right: 41.66666666666667%;
  }
  .col-lg-pull-6 {
    right: 50%;
  }
  .col-lg-pull-7 {
    right: 58.333333333333336%;
  }
  .col-lg-pull-8 {
    right: 66.66666666666666%;
  }
  .col-lg-pull-9 {
    right: 75%;
  }
  .col-lg-pull-10 {
    right: 83.33333333333334%;
  }
  .col-lg-pull-11 {
    right: 91.66666666666666%;
  }
  .col-lg-offset-0 {
    margin-left: 0;
  }
  .col-lg-offset-1 {
    margin-left: 8.333333333333332%;
  }
  .col-lg-offset-2 {
    margin-left: 16.666666666666664%;
  }
  .col-lg-offset-3 {
    margin-left: 25%;
  }
  .col-lg-offset-4 {
    margin-left: 33.33333333333333%;
  }
  .col-lg-offset-5 {
    margin-left: 41.66666666666667%;
  }
  .col-lg-offset-6 {
    margin-left: 50%;
  }
  .col-lg-offset-7 {
    margin-left: 58.333333333333336%;
  }
  .col-lg-offset-8 {
    margin-left: 66.66666666666666%;
  }
  .col-lg-offset-9 {
    margin-left: 75%;
  }
  .col-lg-offset-10 {
    margin-left: 83.33333333333334%;
  }
  .col-lg-offset-11 {
    margin-left: 91.66666666666666%;
  }

There are entries responsible for grid system for every screen size.

After adding these 2 pieces of code to your theme you will see something like that at the bottom of every widget:

You can set here width of the widget for every screen size.

For example, we have set these classes for widgets:

Now we see 2 widgets with width = 50% on large screens ( and width = 100% on smaller screens ):

NOTE:  Code adds 15px space from the left and right so there is a 15px space from the left and right relative to the rest of the website content:

What we need to do is to add below CSS to the container surrounding our widgets:

    margin: 0 -15px;
    width: auto;

Done. Have fun 🙂

Share this post

Leave a Reply

Your email address will not be published. Required fields are marked *