When creating your Bootstrap WordPress themes, you will notice the sidebar widgets (archives, categories, etc) which use dropdowns do not share the Bootstrap styling because there is no place easily accessible to add in the needed classes or CSS.
Considering the options – here are two ways you can turn those default selects into something that matches the rest of your beautiful Bootstrap site.
Add a filter in your functions.php file
This is specific to the category dropdown. I was hoping we could use the same on the widget_categories_dropdown_args filter, but that is not possible as of WordPress 4.6. (see next example to address this). This filter works great if you use the categories widget and no other that display a select.
/**
* Add CSS class to sidebar category selects.
*/
add_filter( 'widget_categories_dropdown_args', 'lucidity_widget_categories_dropdown_args' );
function lucidity_widget_categories_dropdown_args( $args ) {
if ( array_key_exists( 'class', $args ) ) {
$args['class'] .= ' form-control';
} else {
$args['class'] = 'form-control';
}
return $args;
}
Add some Bootstrap CSS to your style.css file
This works great if you have multiple selects displayed within your widgets. Note: the sidebar in the example has an ID of “sidebar”. This CSS is brought over from the Bootstrap .form-control style.
#sidebar .widget select {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
I hope this helps make your site a bit more cohesive with the Bootstrap styles!
