How to customize Wordpress comment_form();
comments, html, php, wordpress, wordpress-theming
Solution
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.
Problem
I am currently developing my own Wordpress theme and have been recently working on a custom `comments_template();`. I have read that using the `wp_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="johndoe@dodgeit.com" 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!