kaffolder kaffolder - 4 months ago 10
HTML Question

How to customize Wordpress comment_form();

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:


  1. Tweak the
    <h3>
    header to
    <h2 class="comments-header">Tell us about you!</h2>

  2. Wrap form fields in
    <fieldset></fieldset>

  3. Wrap
    <label>
    in
    <div class="label"></div>

  4. Wrap
    <input>
    in
    <div class="field"></div>

  5. Make
    <p class="form-allowed-tags"></p>
    display before the comment
    <textarea>
    rather than after

  6. 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&ndash;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!

Answer

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.

Comments