Customize WordPress Comment Form with Bootstrap

Continuing my article on “Create a WordPress Theme with Bootstrap And underscores Step by Step“, I forgot to added how to change template on the wordpress comment form. In order to wordpress comment form can be adapted with bootstrap framework, it needed a wordpress function called ” comment_form() “. Using comment_form() function is quite easy and safe for your wordpress. For explanation comment_form() function can be read directly from

Customize WordPress  Comment Form with Bootstrap

Let’s start the tutorial to customize the comment form wordpress with bootstrap framework. Actually there are many blogs that discuss about wordpress comment form. I’ll just review a little step to use this function to continue my previous article on how to create wordpress template with bootstrap framework and underscore. Here’s a bit of discussion about Function Reference / comment_form() that I took from the site According :

comment_form() description is tag outputs a complete commenting form for use within a template.

The point is to use comment_form() function , you can customize the look of the standard form belongs wordpress comment form in accordance with your imagine without change of the main core of wordpress itself.

For those of you who don’t have the raw of wordpress theme that I have made in previous articles, please read the article and download the file in “Create WordPress Theme with Bootstrap And Underscores Step by Step“. Please open the file in comments.php and find the following code

	// You can start editing here -- including this comment!

On these lines you can added scripts to customize the comment form on a wordpress theme. Copy the following line

$fields =  array(

  'author' =>
    '<p class="comment-form-author"><div class="form-group"><label for="author">' . __( 'Name', 'domainreference' ) . '</label> ' .
    ( $req ? '<span class="required">*</span>' : '' ) .
    '<input id="author" class="form-control" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) .
    '" ' . $aria_req . ' /></div></p>',

  'email' =>
    '<p class="comment-form-email"><div class="form-group"><label for="email">' . __( 'Email', 'domainreference' ) . '</label> ' .
    ( $req ? '<span class="required">*</span>' : '' ) .
    '<input id="email" name="email" class="form-control" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) .
    '" ' . $aria_req . ' /></div></p>',

  'url' =>
    '<p class="comment-form-url"><div class="form-group"><label for="url">' . __( 'Website', 'domainreference' ) . '</label>' .
    '<input id="url" name="url" class="form-control" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) .
    '"   /></p>',
    $comments_args = array(

        // change "Leave a Reply" to "Comment"
        'title_reply'=>'Discuss this post ?',
        'fields' => apply_filters( 'comment_form_default_fields', $fields ),
        'comment_field' =>  '<p class="comment-form-comment"><div class="form-group"><label for="comment">' . _x( 'Comment', 'noun' ) .
            '</label><textarea id="comment" name="comment" class="form-control"  rows="8" aria-required="true">' .
             'comment_notes_after' => ' ');

and then find  function


change with


Save and see the results, wordpress comment form with bootstrap framework is ready to use.

Thus my article on WordPress Comment Form Customize with Bootstrap, may be useful

The following two tabs change content below.
This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.


 Add your comment
  1. where to drop this code? function.php or comment.php ?

Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.