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 codex.wordpress.org.
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 codex.wordpress.org According codex.wordpress.org :
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
1 | // 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | $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">' . '</textarea></div></p>', 'comment_notes_after' => ' '); |
and then find function
1 | comment_form(); |
change with
1 | comment_form($comments_args); |
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
Latest posts by Sigit Prasetya Nugroho (see all)
- Tutorial Create Todolist App With Vue Js 2 For Beginners - September 29, 2018
- Create WordPress Slider Without Javascript - August 30, 2018
- Typed.js The Javascript Library For Automatic Text Writing Effects - August 6, 2018
where to drop this code? function.php or comment.php ?
comment.php 🙂
Thanks! I have used this script, works fine!
thank you guy