WordPress comment_form function with bootstrap 4
Do you want to add the bootstrap input group classes to the WordPress comment form?
It is not possible to customize the comment field directly using comment_form.
But this post has a solution to implement WordPress comment_form function with bootstrap 4 or 4.5.
In short.
To customize the WordPress comments field in bootstrap 4, create a comments.php file. then create an associative array that defines the strings of the bootstrap input groups. call apply_filter, the apply_filter function should receive two parameters, which are comment_form_default_fields and array that the custom input fields were defined.
The final step is to display the comment form in a single page file. To do this call the comment_template function in the single.php file.
That way will invoke comment_form to display a custom comment field.
Now, let’s dive into the actual codes (step by step).
Codes Snippet in comments.php file
In this example, I am going to add a sample of input fields that uses bootstrap classes. These classes are
- Form group
- form-control
Here are the bootstrap input fields to add to a comment_form.
Text input field for the name of the comment writer.
<div class="form-group">
<label>Name*</label>
<input type="text" id="name-id" class="form-control" placeholder="User name">
</div>
Text input field for the e-mail.
<div class="form-group">
<label>Email*</label>
<input type="email" id="name-id" class="form-control" placeholder="Email">
</div>
Text area field for message writing.
<div class="form-group">
<label>Write a Comment</label>
<textarea class="form-control" rows="5"></textarea></div>
You may have different input elements, just for this case, I will put the above fields in the PHP associative array as follow.
First, create an instance variable that is set to an array.
$bootstrapComment_form_fields=array(
'author'=>'<div class="form-group"><label>Name</label><input type="text" id="name-id" class="form-control" placeholder="User name">',
'email'=>’<label>Email*</label><input type="email" id="name-id" class="form-control" placeholder="Email"> </div>'
);
Then create another array to stored filtered fields.
$fields=array(
'fields'=>apply_filters('comment_form_default_fields ', $bootstrapComment_form_fields),
'comment_field'=>’ <div class="form-group"><label>Write a Comment</label><textarea class="form-control" rows="5"></textarea></div>‘
);
After creating the second array, the final function to be included in the code snippet is comment_form.
So, I’m going to call the function as follows.
comment_form($the_fields);
The comment_form passes one argument. The argument is an array that contains HTML form input tags.
Then, the final step is to output the form in the post of the blog.
You will edit the single.php file.
Codes snippet in single.php
A single.php is a WordPress file for displaying a single post content.
Therefore, a comment field is going to be implemented in this file.
To show a bootstrap input from comment_form function, comments_template is always used.
So, the following code snippet is to be written after the post end.
<?php comments_template();?>
comment_form adding Submit button
The code I wrote in the previous section adds the custom text field but a form may consist of many elements.
One of the form elements is a submit button.
To add a submit button that implements bootstrap classes for the buttons, I will use comment_form’s constant parameter ‘submit_button’.
The submit_button key takes a string value.
The value will be a bootstrap buttons classes.
'submit_button'=>'btn btn-primary'
In this case, use btn classes.
To set the color of the submit button you can choose one of the following classes
btn-primarysets a light blue color to a buttonbtn-secondarysets a grey colorbtn-successsets a green colorbtn-dangersets a red colorbtn-warningsets a yellow colorbtn-infosets a dark blue colorbtn-lightsets the light colorbtn-darksets a black color
Hence, add 'submit_button'=>'btn btn-primary' to a second array which was $fields variable to set a color.
$fields=array(
'fields'=>apply_filters('comment_form_default_fields ', $bootstrapComment_form_fields),
'comment_field'=>’ <div class="form-group"><label>Write a Comment</label><textarea class="form-control" rows="5"></textarea></div>‘,
'submit_button'=>'btn btn-primary'
);
Why customizing the comments field by bootstrap?
The short answer is, bootstrap is the best CSS framework to build a responsive page.
In a real sense, WordPress comments field can be changed without the bootstrap framework.
Calling comment_form returns all input groups with some class names that can be used in the style.css.
For example, the followings are the default CSS classes brought by comment_form after calling it in a single.php file.
And many more, So I could rewrite the CSS rules to design the comment form but why should I bother myself to do that while the bootstrap form-group classes give a very good-looking input form.
Re-arranging the input fields of comment_form.
The simple strategy to re-arrange form elements is to reorder the array elements.
If you have read the post from the start you may have already known how to do that.
By default, the first form element is textarea then followed by Name, Email, and Website.
To change this arrangement, I’m going to reorder my array, which is $bootstrapComment_form_fields.
This time I will start with e-mail and then the name field.
The textarea is going to be the last element.
$bootstrapComment_form_fields=array(
'email'=>’<label>Email*</label><input type="email" id="name-id" class="form-control" placeholder="Email"> </div>',
'author'=>'<div class="form-group"><label>Name</label><input type="text" id="name-id" class="form-control" placeholder="User name">'
);
That will change the arrangement of the form input elements.
But this is not the ultimate solution.
There are so many ways to re-arrange input fields in the comment_form function.
Check some of the answers from StackOverflow that solve this issue.
Wrap-up
To customize comment fields with the WordPress comment_form function with bootstrap 4 requires two associative arrays and two other functions.
The first array should contain at most four strings elements. These elements are Html input mark up with bootstrap form-group and form-control classes.
The key arguments are the WordPress built-in constants which are author, url, email and cookie. And this array is to be passed in the apply_filters function. So the second array takes all elements of the first and it can be added other elements.
Then the second array has to be passed as a parameter of comment_form. please read the entire article to get a full insight on how to include bootstrap classes in the comment field.
