WordPress Comment Form with Twitter Bootstrap 3 Supports

WordPress Comment Form

WordPress has a builtin function comment_form to output a complete commenting form for use within a template. We can copy the function and create custom styles for our need. But instead of creating a new function, we can use WordPress filter and action to change it. The main idea of this post is to add Bootstrap 3 supports for the generated comment form by changing the form classes and layout. We will use this Bootstrap example because it is pretty much similar with the WordPress comment form. All the codes below can be pasted in the current theme functions.php to create Bootstrap comment form.

Modifying Comment Form Default Field

The comment form defaults fields contain name, email and website input. We need to change the container from p to div and add “form-group” class to it. Beside that, we also need to add the input class “form-control”.

add_filter( 'comment_form_default_fields', 'bootstrap3_comment_form_fields' );
function bootstrap3_comment_form_fields( $fields ) {
    $commenter = wp_get_current_commenter();
    
    $req      = get_option( 'require_name_email' );
    $aria_req = ( $req ? " aria-required='true'" : '' );
    $html5    = current_theme_supports( 'html5', 'comment-form' ) ? 1 : 0;
    
    $fields   =  array(
        'author' => '<div class="form-group comment-form-author">' . '<label for="author">' . __( 'Name' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' .
                    '<input class="form-control" id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></div>',
        'email'  => '<div class="form-group comment-form-email"><label for="email">' . __( 'Email' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' .
                    '<input class="form-control" id="email" name="email" ' . ( $html5 ? 'type="email"' : 'type="text"' ) . ' value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></div>',
        'url'    => '<div class="form-group comment-form-url"><label for="url">' . __( 'Website' ) . '</label> ' .
                    '<input class="form-control" id="url" name="url" ' . ( $html5 ? 'type="url"' : 'type="text"' ) . ' value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></div>'        
    );
    
    return $fields;
}

Modifying Textarea Field

For this field we also need to do the same thing as other inputs above.

add_filter( 'comment_form_defaults', 'bootstrap3_comment_form' );
function bootstrap3_comment_form( $args ) {
    $args['comment_field'] = '<div class="form-group comment-form-comment">
            <label for="comment">' . _x( 'Comment', 'noun' ) . '</label> 
            <textarea class="form-control" id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea>
        </div>';
    $args['class_submit'] = 'btn btn-default'; // since WP 4.1
    
    return $args;
}

Creating Submit Button

By default the comment form creates its submit button. There is no filter or action to change or remove it. But we can hide it using CSS and create a new one by hooking to other action.

Update

Since WordPress 4.1 https://core.trac.wordpress.org/changeset/29809 the input button now has class_submit argument for the submit button class. And this code below is no longer needed.

add_action('comment_form', 'bootstrap3_comment_button' );
function bootstrap3_comment_button() {
    echo '<button class="btn btn-default" type="submit">' . __( 'Submit' ) . '</button>';
}

Custom CSS to Reduce the Input Width

After the changes we made above, we need to hide the default submit botton add custom styles to reduce the width of the input name, email and website. In this example we will set the width to 50%. We can add this style to wp_head or put it in the theme styles.css file.

.form-submit {
    display: none;
} /* no longer needed since WP 4.1 */

.comment-form-author,
.comment-form-email,
.comment-form-url {
    width: 50%;
}

Conclusion

As explained above, we can create our own custom function to output the comment form template without using filter or action hook. But it you don’t want to do it and prefer using the WordPress hook, all codes above can be a good start to extend and create Bootstrap 3 framework supports.

27 comments on “WordPress Comment Form with Twitter Bootstrap 3 Supports

  1. That support is great, but I ran into trouble wanting to alter/change the default order. Is it possible to put the textarea first. Been searching around and didn’t find any answers. Thanks

  2. This is the code I was looking all day. You save me. The new wordpress theme i’m doing with bootstrap 3 needs this code to make comments part compatible with bootstrap

    Thanks again
    Wecode

  3. Hi, great article!

    I had this working great until I updated to 3.9.2 (from 3.9.1) – Suddenly the new fields have disappeared on my comments form!

    I guess this may be a bug in WP 3.9.2 but wanted to see if you have any insights?

    Thanks in advance

  4. How about to use JavaScript to add the attribute of the submit button:

    $(‘#commentform input#submit’).addClass(‘btn btn-primary’);

    And you can also apply that to the reply comment button. Full script:

    jQuery(document).ready(function($) { //noconflict wrapper
    //Bootstrap style button for comment submit button.
    $(‘#commentform input#submit’).addClass(‘btn btn-primary’);
    // Bootstrap style button for comment reply link.
    $( ‘.comment-reply-link’ ).addClass( ‘btn btn-primary’ )
    });//end noconflict

  5. From WordPress Version 4.1, it’s now added to pass your own class as an argument of comment_form($args) using ‘class_submit’ array key:

    $args = array( ‘class_submit’ => ‘btn btn-default’ );

    So we not need to add:

    .form-submit {
    display: none;
    }

Create Comment

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