How to customize WordPress comment_form();

1 Views

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.

Read More

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!

Post Views: 1

Related posts

Leave a Reply

8 comments

  1. 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

  2. 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.

  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.

  4. 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);?>

  5. 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

  8. My theme used the default function comment_form, so I made a change in the child theme.

        if(function_exists('glutton_comment_form'))
        glutton_comment_form(); //custom function for displaying comments, defined in glutton-child/functions.php
    else
        comment_form();