I don’t see anything wrong with the widget class. The problem you have is that you are displaying the widget area, that contains the widgets, twice in your sidebar.php
:
<aside id="secondary" class="widget-area col-sm-12 col-md-12 col-lg-12" role="complementary">
<div class="col-lg-6 col-md-12">
<?php dynamic_sidebar( 'main-widget' ); // this will display all the widgets in your main-widget sidebar ?>
</div>
<div class="col-lg-6 col-md-12">
<?php dynamic_sidebar( 'main-widget' ); // this will display again all the widgets in your main-widget sidebar ?>
</div>
</aside><!-- #secondary -->
The second widget in each sidebar display is probably hidden due to some CSS, but I bet it is there, twice, once on the left and one on the right.
So, do not call dynamic_sidebar( 'main-widget' );
twice.
From what I understand you want to wrap the widgets in certain divs so you can put them on two columns. For this you need to filter the before-widget
and after-widget
params of each widget via the dynamic_sidebar_params
filter. Or, better yet you could use some CSS to do the trick.
Here is a starter PHP code that will add wrappers to each widget in your target widget area:
/**
* @param array $params
*/
function sole_add_widget_columns_wrapper( $params ) {
// Add the opening wrapper tag
$params[0]['before_widget'] = PHP_EOL . '<div class="col-lg-6 col-md-12">' . PHP_EOL . $params[0]['before_widget'];
// Add the closing wrapper tag
$params[0]['after_widget'] = $params[0]['after_widget'] . PHP_EOL . '</div><!-- close wrapper -->' . PHP_EOL;
}
/**
* @param string $index
*/
function sole_handle_main_widget_area_columns( $index ) {
// We only want to deal with the main widget area
if ( 'main-widget' !== $index ) {
return;
}
// Filter each widget params and add the wrappers
add_filter( 'dynamic_sidebar_params', 'sole_add_widget_columns_wrapper', 10, 1 );
// Hook an action to remove the filter above after we are done with this widget area.
// This way we don't affect other widget area that may come, on the same page, after this one.
add_action( 'dynamic_sidebar_after', 'sole_remove_main_widget_area_columns_filter', 10 );
}
add_action( 'dynamic_sidebar_before', 'sole_handle_main_widget_area_columns', 10 );
function sole_remove_main_widget_area_columns_filter() {
remove_filter( 'dynamic_sidebar_params', 'sole_add_widget_columns_wrapper', 10 );
}
This code will wrap each widget, it will not put even and odd widgets into two column wrappers.