Nasty, eh? It’s a mess of if/else statements. It handles cases where the user is logged in or not, where the comments are open or closed, whether registration is required, etc. It’s confusing, difficult to modify, poor for CSS referencing…

Here’s what I replaced all that code with:

<?php comment_form(); ?>

Now then, that’s much better, isn’t it?

The comment_form function is new to 3.0. Basically, it standardizes the comments form. It makes it wonderful for us plugin authors, since now we can easily modify the comments form with various hooks and things. I’ve already modified Simple Facebook Connect and Simple Twitter Connect to support this new approach; if you’re using a theme with this, then the user won’t have to modify it to have their buttons appear on the comments form.

Customizing

Since theme authors love to customize things, the comments form is also extremely customizable. Doing it, however, can be slightly confusing.

Inside the comments_form function, we find some useful hooks to let us change things around.

The first hook is comment_form_default_fields. This lets us modify the three main fields: author, email, and website. It’s a filter, so we can change things as they pass through it. The fields are stored in an array which contains the html that is output. So it looks sorta like this:

All the various pieces of html that are displayed as part of the comment form section are defined here. So those can be modified as you see fit. However, unlike the fields, adding new bits here won’t help us at all. The fields get looped through for displaying them, these are just settings that get used at various times.

But filters are not the only way to modify these. The comment_form function actually can take an array of arguments as the first parameter, and those arguments will modify the form. So if we wanted a simple change, like to change the wording of “Leave a Reply”, then we could do this:

<?php comment_form(array('title_reply'=>'Leave a Reply, Stupid')); ?>

This gives us a simple and easy way to make changes without all the trouble of filters. Nevertheless, those filters can be very useful for more complex operations.

But wait, there’s more!

As the comments form is being created, there’s a ton of action hooks being called, at every stage. So if you want to insert something into the form itself, there’s easy ways to do it.

A quick list of the action hooks. Most of them are self-explanatory.

comment_form_before

comment_form_must_log_in_after

comment_form_top

comment_form_logged_in_after

comment_notes_before

comment_form_before_fields

comment_form_field_{$name} (a filter on each and every field, where {$name} is the key name of the field in the array)

comment_form_after_fields

comment_form_field_comment (a filter on the “comment_field” default setting, which contains the textarea for the comment)

comment_form (action hook after the textarea, for backward compatibility mainly)

comment_form_after

comment_form_comments_closed

CSS and other extras

Let’s not forget styling. All parts of the comments form have nice classes and id’s and such. Take a look at the resulting HTML source and you’ll find all the styling capabilities you like. Also, everything is properly semantic, using label tags and aria-required and so forth. All the text is run through the translation system for core translations.

So theme authors should start modifying their themes to use this instead of the existing big-ugly-comment-form code. Your users will thank you for it. Plugin authors will thank you for it. And really, it’s about time we made WordPress themes more about design and less about the nuts and bolts of the programming, no?

Hi! This is okey and I’ve red and understood it from codex, BUT there is some qstn please, how to customize html around submit button? I can change text – okey, but I can’t see where I could paste a piece of code so that my button was stylish. Guys please help me, because my defaulte theme has a tone of codes, I did it all except of that button, really really appriciate for your help

Are you talking about changing the look of the button entirely? if you want to to do that then its best you style it through css.
For example the submit button will have an ‘id’ which will most likely be: id=”submit”; you should then find that id in the css and use the background-image: url() to link to the image you would want your reply button to look like.
I think that should do it, if there is still trouble, shout

[…] you would like to learn more about customization of the comment form, you might want to check out WordPress 3.0 Theme Tip the Comment Form. Step 10 – Page.php When you create a page in WordPress, a different file is used to display the […]

Hi,
Good help provided by you, but i want to change on my site http://makeadvice.com/ comment looks only, not a field, for me field is ok, just want to change a look, kindly provide some info, for the same, thanks .

Also, where does the comment approval function occur (where admins approve or disapprove comments). I’d like to provide additional fields on a comment so that the admin can make adjustments to comments in the admin area, not the actual comment form.

you would add the onclick= to your search form. In twentyeleven you are looking for the file searchform.php.
Copy the searchform.php from your twentyeleven theme folder and paste it into your child theme folder. That way when WordPress update twentyeleven it will update that searchform not your child theme searchform.

I solved this making a “not smart solution” based on commeting the function comment_form and writing directly the expected html generated code with the onclick information. The only thing that you need is to use the getID(), the_permalink(); and $_SERVER[‘REQUEST_URI’] to complete the dynamic parameters.

I have the one line of code in comments.php, and in single.php I have , but where are the comments actually displayed? I cannot figure this out. I’ve looked in the codex and in tons of forums, but no one else even seems to be having this problem!

Oh I forgot, your still going to need to wrap it in a div tag, something like , that way you will still be able to style the form how you want it. As Otto has mentioned this is not a tutorial people, it pointing out simple changes to a WordPress function. The best way to learn about the comments form is to study the comment form that comes with WordPress Twenty Twelve theme. It’s relatively simple structure makes the form easy to learn.

This tutorial sucks… If you’re going to take the time to post a tutorial, don’t “truncate” important details that a visitor will need to implement the design technique… Judging from how many people had to post to try and get clarification on the topic, maybe you should consider revising this so that it makes usable sense.

Firstly, this isn’t a tutorial. It’s just a tip pointing out some of the things that were new to WordPress, 2 years ago. If you need a tutorial on how to use this particular part of the code (which is actually obvious, or should be to anybody messing with this stuff), then you might want to go elsewhere.

Secondly, I didn’t truncate any important details, I highlighted parts that one would need to notice in order to do customization of the comment form. This blog is aimed at people who know how to code already. Given that, if people who don’t know how to code read it and are confused by it, that’s not my target audience and I’m not interested in hold-holding them through the process.

Everybody learns on their own, because there’s no other way to “learn”.

Thanks for the tip (and for the good amount of detail put in). I am trying to write a plugin to add a new field to the comments form. I have used hook for “comment_form_default_fields” and added my new field (it is a checkbox). This works fine if no user is logged in. However, if the user is logged on, the form shows with only the comments textarea. Can you tell me what I am doing wrong here (or is it a WP limitation)?

This was GREAT! Thank you, I’ve not been working with WordPress for over a year and am rusty. I didn’t know about the new comment form. Very helpful, I’ll check out the codex and dig into the array. Thanks again.

[…] This will display a comments form that looks well on our theme, but if you would like to learn more about customization of the comment form, you might want to check out WordPress 3.0 Theme Tip the Comment Form. […]

I have read this entire post twice at least. I use the Admired theme
I can see where he has the code from you under theme fuctions for comments fields. However,
the comment form is displayed as leave a comment with a comment box. I don’t want to change anything until I am for certain I know exactly what I am doing and I am so confused. Been working on this for two days. I understand your code and the flow but what I see under theme fuctions doesn’t look exactly like yours and I don’t want to change anything. Can you help me. Thanks.

Hi.. i’m working on wordpress blog and i have to implement the same functionality
“Notify me of follow-up comments by email”
“Notify me of new posts by email”
in comments form section as u have implemented in ur form.can you let me know how u have done this ..is there any plugin for that???
please reply..
thanks

This is an excellent post — thank you very much for your help. I was successful changing my comment form and am using Jetpack. I’m wondering, though, how I can change what happens after someone leaves a comment. Right now, it says, “Submitting a comment,” but after that happens, nothing displays. Because I don’t allow automatic comments (unless someone has already had an approved comment), it might be confusing to the commenter that the comment went through. Is there a way to fix this? Thank you very much!

Hi Otto, thanks for this very thorough explanation. I’m trying to add a required checkbox to the comment form. I am able to add it successfully via the functions.php or in my theme-functions.php (in my woo-theme) however the form still goes through if the checkbox isnt ticked. Only if the name and email arent filled out does pull up the error page.

How can I make the form ensure the field is required before submission.

Good tutorial. Used it to develop my own customized contact form plugin, where I re-define the $args for the comment form fields.

But it turns out, while testing, that some themes create their own ‘textarea’ field, which adds to my ‘textarea’ field, resulting in two comment text fields. Not good.

I have set my add_filter( ‘comment_form_default_fields’, my_function(), 99,1) with a higher priority (99) so that it happens later in the ‘page build’ (after the theme does it’s comment_form_default_fields), but the duplicates comment text boxes are still there. Also tried a priority of 8, and that didn’t do it either.

I also tried unset($arg) (the parameter passed to my_function; contains the array of fields/etc), and a unset($_GLOBAL[$arg]), and still the duplicate textarea field shows up.

So, can you think of a generic (works for any theme) that can determine if the comment field has already been defined? And, if the duplicate is found, remove the one in the theme, so I can replace it with mine? Or is there a better way to ‘start over’ on the defining of fields in the comment form.

I understand that the problem might be caused by bad coding practices on the theme, but would like to find a workaround so a theme doesn’t change the fields I want on the comment form.

Since the ‘duplicating’ problem is theme-based, there are two options: change to another theme, or dig into the theme and re-write the comment function with a custom functions.php in a child theme. (You never want to modify theme code directly, but always use a custom theme.)

I figure if a theme is doing that funny stuff there, then they are probably doing non-standard things elsewhere, so I usually just change themes.

Or you could use add_filter with a lower priority to adjust the $args array to how you need it. Since the lower priority of your function will happen after the theme does it’s non-standard thing, then your changes will ‘stick’. But again, you always need to use a child theme, rather than changing the theme code directly. If you don’t, then your changes disappear during the next theme update.