Commenting is very useful function to yet your reader feedback about your articles. And feedback definitely helps you to improve your post quality, it also gives you more courage. So, customizing the comment form is something you will want at some certain time to get the feedback channel in the way you want. I’ll share you some experience on it.
The comment_form() function
Function comment_form() outputs a complete commenting form for use within a WordPress template. It has an array argument that you can control strings and form fields.
The WordPress 3.0+ function – comment_form() has 2 parameters that can be optionally modified. Let’s see an example arguments that can be used:
|
1 |
comment_form($args, $post_id); |
In which:
$args: contains options for our strings and fields within the form.
$post_id: is used to generate the form, if null it will use the current post.
For more the details, full signature of of this functions is as below:
|
1 |
comment_form(array $args = array(), int|WP_Post $post_id = null) |
In common cases, this function is called from Comments.php template file, which is usually called in a single post templage, single.php.
Let’s look more closely which parameters we can put in $args:
Element IDs: 2 parameters to overwrite the default ID for the form and the submit button. id_form controls the ID for the form itself, id_submit determines the ID for the “submit” button.
Labels & Titles: Four functions to control labels and titles in the form. title_reply controls the title at the top of the form when writing a top-level comment.
title_reply_to controls the title of the comment comment form when writing a reply to another comment. The text of the cancel reply link is controlled by cancel_reply_link and the text in the submit button is controlled by the label_submit parameter.
Notes & Text: There’re 4 larger blocks of text available in the comment form. comment_notes_before and comment_notes_after controls the text seen before and after the comment form.
The text in the login notification can be controlled using the must_log_in and logged_in_as parameters.
Field Customization: Fields can be customized by specifying their full HTML. Note that the author, email and url fields can be customized by using the fields parameter, but comment field has it’s own parameter: comment_field. I don’t know why. Let’s take a look at the example below which shows the default code for each field.
|
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 |
$args = array( 'comment_field' => '<p class="comment-form-comment"><label for="comment">' . _x( 'Comment', 'noun' ) . '</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p>' 'fields' => apply_filters( 'comment_form_default_fields', array( 'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name', 'domainreference' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) . '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>', 'email' => '<p class="comment-form-email"><label for="email">' . __( 'Email', 'domainreference' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) . '<input id="email" name="email" type="text" value="' . esc_attr( $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>', 'url' => '<p class="comment-form-url"><label for="url">' . __( 'Website', 'domainreference' ) . '</label>' . '<input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></p>' ) ); comment_form( $args ); |
You may also choose to use the comment_form_default_fields filter to modify the array of default fields if you’d just like to add a new one or remove a single field. All fields are also individually passed through a filter of the form comment_form_field_$name where $name is the key used in the array of fields. For example, to remove the email field from, I can add below code into theme functions.php file:
|
1 2 3 4 5 |
function my_disable_comment_email($fields) { unset($fields['email']); return $fields; } add_filter('comment_form_default_fields',my_disable_comment_email'); |
Styling the form
Most of the case, you will modify comment form of an existing theme. You can just add necessary CSS to its existing stylesheet. Just open HTML source of a post on your existing WordPress installation, then you know all the HTML elements ID/class to use for CSS code. Let’s look at a sample of comment form HTML code in Twenty Fifteen:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<form action="http://wp.local/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate> <p class="comment-notes"> <span id="email-notes">Your email address will not be published.</span> Required fields are marked <span class="required">*</span> </p> … <p class="form-submit"> <input name="submit" type="submit" id="submit" class="submit" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='1' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p> </form> |
But with this way, your added CSS will be automatically removed once you update the theme. The recommended way is to create a child-theme.
Using plugins to serve both above purposes
There are a number of plugins which are able to modify comment form. Some add features like AJAX to prevent page reloading, some add styling and some replace the default comment form with a third-party solution like Disqus or Facebook comments. Later I’ll talk more about 3rd party comment systems.
Take a look at the comments related plugins available in the repository for your searching.
Leave a Reply