How to customize Wordpress comment_form();
Solution 1
I use functions.php
to modify comments display. I don't know if it is the way things are done now (last site that I was developing with WP and needed comments was in 2009 ;)), but here it is (place it in functions.php
file!:
function THEMENAME_comment($comment, $args, $depth) {
$GLOBALS['comment'] = $comment;
*your comment display code*
}
Remember to create pingback theme aswell. You do it similar to comments, only difference is the first line:
function THEMENAME_pings($comment, $args, $depth)
Other way may be using comments_template.
Solution 2
Simple example how to change some comment form fields.
$comments_args = array(
// change the title of send button
'label_submit'=>'Send',
// change the title of the reply section
'title_reply'=>'Write a Reply or Comment',
// remove "Text or HTML to be displayed after the set of comment fields"
'comment_notes_after' => '',
// redefine your own textarea (the comment body)
'comment_field' => '<p class="comment-form-comment"><label for="comment">' . _x( 'Comment', 'noun' ) . '</label><br /><textarea id="comment" name="comment" aria-required="true"></textarea></p>',
);
comment_form($comments_args);
For more information: comment_form() documentation on WordPress Codex
Solution 3
If all else fails, in comments.php in your theme directory,
change comment_form($args);
to
ob_start();
comment_form($args);
$comment_form = ob_get_clean();
//insert code to modify $comment_form
echo $comment_form;
I used this to change the submit button to an image button.
Solution 4
The comment_form uses an array of fields. The values in that array are a string. You can override the output of the fields by adding your own string for the respective key, like so:
function modify_comment_fields($fields){
$fields = array('author' =>'<div><p class="comment-form-author"><label for="author">Author</label><input id="author" name="author" type="text"/></p></div>');
return $fields;
}
Then add a filter to your function:
add_filter('comment_form_default_fields','modify_comment_fields');
Here's a link to the Codex on the comment_form function: http://codex.wordpress.org/Function_Reference/comment_form
Solution 5
On Single.php after post content
Use it for custom comment form html and design
<?php $comments_args = array(
// change the title of send button
'label_submit'=>'Submit',
// change the title of the reply section
'title_reply'=>'Add a comment',
// remove "Text or HTML to be displayed after the set of comment fields"
'comment_form_top' => 'ds',
'comment_notes_before' => '',
'comment_notes_after' => '',
// redefine your own textarea (the comment body)
'comment_field' => '<p class="comment-form-comment"><textarea id="comment" name="comment" placeholder="Your Comment* " aria-required="true"></textarea></p>',
'fields' => apply_filters( 'comment_form_default_fields', array(
'author' =>
'<p class="comment-form-author">' .
'<input id="author" class="blog-form-input" placeholder="Your Name* " name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) .
'" size="30"' . $aria_req . ' /></p>',
'email' =>
'<p class="comment-form-email">'.
'<input id="email" class="blog-form-input" placeholder="Your Email Address* " name="email" type="text" value="' . esc_attr( $commenter['comment_author_email'] ) .
'" size="30"' . $aria_req . ' /></p>',
'url' =>
'<p class="comment-form-url">'.
'<input id="url" class="blog-form-input" placeholder="Your Website URL" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) .
'" size="30" /></p>'
)
),
);
comment_form($comments_args);?>
kaffolder
Updated on December 01, 2020Comments
-
kaffolder over 3 years
I am currently developing my own Wordpress theme and have been recently working on a custom
comments_template();
. I have read that using thewp_list_comments();
method is best practice for pulling in and displaying the comments per page/post. I have successfully customized the way that the comments are pulled in through that method and displayed.I have also read that using the
comment_form();
method is the best practice for displaying the comment form. However, I am really struggling with trying to customize this. I am a little confused between the $args, filters and actions.Essentially I would like to drastically change parts of the comment form. How might I go about changing parts of the comment form while still using best practice with the
comment_form();
method?All I am really needing to do is wrap several of the existing
<p>
tags in<divs>
. List of updates I am trying to make are below:- Tweak the
<h3>
header to<h2 class="comments-header">Tell us about you!</h2>
- Wrap form fields in
<fieldset></fieldset>
- Wrap
<label>
in<div class="label"></div>
- Wrap
<input>
in<div class="field"></div>
- Make
<p class="form-allowed-tags"></p>
display before the comment<textarea>
rather than after - Change form Submit button to use the
<button>
element rather than<input>
Please see the code below for further explanation...
Default comment_form(); code that is output:
<div id="respond"> <h3 id="reply-title">Leave a Reply</h3> <form action="http://localhost/.../wp-comments-post.php" method="post" id="commentform"> <p class="comment-notes"> Your email address will not be published. Required fields are marked <span class="required">*</span> </p> <p class="comment-form-author"> <label for="author">Name</label> <span class="required">*</span> <input id="author" name="author" type="text" value="John Doe" size="30" aria-required="true"> </p> <p class="comment-form-email"> <label for="email">Email</label> <span class="required">*</span> <input id="email" name="email" type="text" value="[email protected]" size="30" aria-required="true"> </p> <p class="comment-form-url"> <label for="url">Website</label> <input id="url" name="url" type="text" value size="30"> </p> <p class="comment-form-comment"> <label for="comment">Comment</label> <textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea> </p> <p class="form-allowed-tags"> You may use these HTML tags and attributes... </p> <p class="form-submit"> <input name="submit" type="submit" id="submit" value="Post Comment"> <input type="hidden" name="comment_post_ID" value="22" id="comment_post_ID"> <input type="hidden" name="comment_parent" id="comment_parent" value="0"> </p> </form> </div> <!-- #respond -->
Code I am trying to output:
<div id="respond"> <h2 class="comments-header">Tell us about you!</h2> <form action="http://localhost/.../wp-comments-post.php" method="post" id="commentform"> <fieldset> <div class="label"><label for="author">Name <span class="required">*</span></label></div> <div class="field"><input id="author" name="author" type="text" value="<?php echo $comment_author_email; ?>" size="30" aria-required="true"></div> </fieldset> <fieldset> <div class="label"><label for="email">E–mail (will not be published) <span class="required">*</span></label></div> <div class="field"><input id="email" name="email" type="text" value="<?php echo $comment_author_email; ?>" size="30" aria-required="true"></div> </fieldset> <p class="form-allowed-tags"> You may use these HTML tags and attributes... </p> <fieldset> <div class="field"><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></div> </fieldset> <p class="form-submit"> <button class="story-submit-btn" type="submit" name="submit" id="sub">Post your story</button> <input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" id="comment_post_ID"> <input type="hidden" name="comment_parent" id="comment_parent" value="0"> </p> </form> </div> <!-- #respond -->
Any help is GREATLY appreciated!
- Tweak the