WordPress Comments Form – How to change HTML

I searched high and low for a good tutorial on how to change the HTML of the wordpress comment form. From the articles I did find I managed to put together something that works. Feel free to post a comment if there is a better way of doing this…

I put the below code in functions.php and comment_form(); in my comments.php

The code below is my modified version. For defaults simply add or replace my code with http://codex.wordpress.org/Function_Reference/comment_form

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
27
28
29
30
31
32
33
34
35
36
37
add_filter( 'comment_form_defaults', 'my_comment_defaults');
 
function my_comment_defaults($defaults) {
	$req = get_option( 'require_name_email' );
	$aria_req = ( $req ? " aria-required='true'" : '' );
 
	$defaults = array(
		'fields'        	   => array(
		'author' => '<div><label for="author">' . __( 'Name' ) . ( $req ? '<span class="required">*</span>' : '' ) . '</label> ' . '<input id="author" name="author" placeholder="your name" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></div>',
		'email' => '<div><label for="email">' . __( 'Email' )  . ( $req ? '<span class="required">*</span>' : '' ) . '</label> ' . '<input id="email" name="email" placeholder="email@address.co.uk" type="email" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></div>'
                ),
		'comment_field' => '<div><label for="comment">' . _x( 'Comment', 'noun' ) . '</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"  placeholder="your comment"></textarea></div>',
 
		'must_log_in'          => '<p class="must-log-in">' .  sprintf( __( 'You must be <a href="%s">logged in</a> to post a comment.' ), wp_login_url( apply_filters( 'the_permalink', get_permalink( $post_id ) ) ) ) . '</p>',
 
		'logged_in_as'         => '<p class="logged-in-as">' . sprintf( __( 'Logged in as <a href="%1$s">%2$s</a>. <a href="%3$s" title="Log out of this account">Log out?</a>' ), admin_url( 'profile.php' ), $user_identity, wp_logout_url( apply_filters( 'the_permalink', get_permalink( $post_id ) ) ) ) . '</p>',
 
		'comment_notes_before' => '<fieldset>',
 
		'comment_notes_after'  => '</fieldset>',
 
		'id_form'              => 'commentform',
 
		'id_submit'            => 'submit',
 
		'title_reply'          => __( 'Leave a Comment' ),
 
		'title_reply_to'       => __( 'Leave a Reply %s' ),
 
		'cancel_reply_link'    => __( 'Cancel reply' ),
 
		'label_submit'         => __( 'Comment' ),
 
                );
 
    return $defaults;
}

You will notice I have made the following modifications

  • Removed the website field
  • Added type=”email” to the Email field (HTML5)
  • Added placeholder text (HTML5)
  • Removed the default text from the top and bottom of the form and replaced with <fieldset></fieldset>
  • Moved the required * inside the label
  • Changed the “Leave a Reply” title to “Leave a Comment”
  • Changed the text of the submit button

Comments

  1. Great! You got the the most simple way to build up the wp- comment form with html5 / placeholder. And after a endless journey of searching the web this way works like a charme. Thank you so much!

    Werner - 08 Jul 2011
  2. great post! I’ll be using this as a jumping-off point for the site I’m building. One thing that would make this post perfect would be to have the HTML output listed here under the php. Right now I’m looking for how to build the static template’s HTML so that I don’t have to completely recode it all once I plug it all into WP.

    Thanks!

    Ryan - 18 Jul 2011
  3. Hi Ryan

    If you view the source of the comments form on this page you will find the HTML you are looking for. Great suggestion though, I will try and add to the post as soon as I can.

    Hannah - 19 Jul 2011
  4. Thank you SO much for this!! You just saved me an entire day of trial and error coding, me being the lame php coder that I am. This is invaluable! :D

    Afton - 11 Apr 2012
  5. Your post is great, saved me a lot of trial and error, but I noticed this:

    comment_notes_before: (string) (optional) Text or HTML to be displayed before the set of comment form fields if the user is not logged in.

    comment_notes_after: (string) (optional) Text or HTML to be displayed after the set of comment fields (and before the submit button)

    So, you should not be using it to place your ” tag before the inputs because if there’s an user logged in it won’t display and comment_notes_after will still be placing the closing ” tag. This will result in a syntax error for sure.

    Someone got a better solution?

    TCB13 - 29 Aug 2012

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>