Category: HOWTOs

Looking to stylize that WordPress comment button on the WordPress comment form? Adding the correct classes needed to the comment form button are as easy as finding where comment_form() is called in your theme. In my cases – this is within the comments.php file.

Once you find that – you just need to change
comment_form()
to:

$args = array(
'class_submit' => 'btn btn-default',
);
comment_form($args )


There are a number of modifications you can make to the comment form (changing button text, changing labels, adding notes, etc that you can make with the comment_form() function which are worth looking at here: https://codex.wordpress.org/Function_Reference/comment_form

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!