Despite its initial appearance of simplicity, the task is proving to be quite complex.
I am attempting to register a class on the inner part of the widget output. My setup involves using Bootstrap 3, which requires me to include a panel-body class in the inner section, while the entire widget itself is enveloped by a panel with the class panel-default.
For example:
register_sidebar(
array(
'name' => __( 'Home Page (Beside Content)' , 'symbiostock' ),
'id' => 'home-page-beside-content',
'class' => 'panel-body',
'before_widget' => '<div class="panel panel-default home-beside-content"><aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside></div>',
'before_title' => '<div class="row panel-heading"><h3 class="featured-posts col-md-12">',
'after_title' => '</h3></div>', ) );
Initially, one would expect that "class=>'something'" would apply a class to the inner part of the widget. However, this does not appear as intended. The result is as follows:
<div class="panel panel-default home-beside-content">
<aside class="widget widget_text" id="text-8">
<div class="row panel-heading">
<h3 class="featured-posts col-md-12">This is a test</h3>
</div>
<div class="textwidget">This is a test</div>
</aside>
</div>
The expected outcome is:
<div class="panel panel-default home-beside-content">
<aside class="widget widget_text" id="text-8">
<div class="row panel-heading">
<h3 class="featured-posts col-md-12">This is a test</h3>
</div>
<div class="textwidget panel-body">This is a test</div>
</aside>
</div>
Take note of the addition of "panel-body".
How can I resolve this issue? The nesting order of classes is crucial due to my use of bootstrap 3.