Total Followers 132,503
With the release of WordPress 3.0, a new function is given to us to use. comment_form() will display the comment form on any given page with ease. This will be good for both theme developers and plugin developers alike. This new function opens up new doors and allows us to modify things that before were much more complicated.
In this article I will explain how to use the new comment_form() function within WordPress 3.0 to give better usability within our comments function inside of WordPress.
To use this function you can open up your comments.php file within your theme and view the code that should look similar to the following:
<?php if ('open' == $post->comment_status) : ?>
<div id="respond">
<h3><?php comment_form_title( 'Leave a Reply', 'Leave a Reply to %s' ); ?></h3>
<div class="cancel-comment-reply">
<small><?php cancel_comment_reply_link(); ?></small>
</div>
<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
You must be <a href="<?<span class="><?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=">logged in</a> to post a comment.
<pre><?php else : ?></pre>
<form action="<?<span class="><?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform"></form>
<?php if ( $user_ID ) : ?>
Logged in as <a href="<?<span class="><?php echo get_option('siteurl'); ?>/wp-admin/profile.php"></a>. <a title="Log out of this account" href="<?php echo wp_logout_url(get_permalink()); ?>">Log out »</a>
<?php else : ?>
<input id="author" name="author" type="text" value="<?<span class=" /><?php echo $comment_author; ?>" size="22" tabindex="1" />
<label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label>
<input id="email" name="email" type="text" value="<?<span class=" /><? php echo $comment_author_email; ?>" size="22" tabindex="2" />
<label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label>
<input name="<span class=" type="text" />url" id="url" value="" size="22" tabindex="3" />
<label for="<span class=">url"><small>Website</small></label>
<?php endif; ?>
<!--<small><strong>XHTML:</strong> You can use these tags: <code></code></small>
-->
<textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4">
<p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
<?php comment_id_fields(); ?>
</p>
<?php do_action('comment_form', $post->ID); ?>
</form>
<?php endif; // If registration required and not logged in ?>
</div>
<?php endif; // if you delete this the sky will fall on your head ?>
</div>
You can delete the above code in comments.php file and replace it with the following:
<?php comment_form(); ?>
The WordPress 3.0 function – comment_form() has 2 parameters that can be optionally modified to your liking: Here is the example arguments that can be used:
<?php comment_form($args, $post_id); ?>
Now to explain what each of these parameters do so we know how to use them:
$args: This contains our options for our strings and fields within the form and etc.
$post_id: Post ID is used to generate the form, if null it will use the current post.
The $arg parameter uses the following values by default:
<?php $defaults = array( 'fields' => apply_filters( 'comment_form_default_fields', array(
'author' => '<p class="comment-form-author">' .
'<label for="author">' . __( 'Name' ) . '</label> ' .
( $req ? '<span class="required">*</span>' : '' ) .
'<input id="author" name="author" type="text" value="' .
esc_attr( $commenter['comment_author'] ) . '" size="30" tabindex="1"' . $aria_req . ' />' .
'</p><!-- #form-section-author .form-section -->',
'email' => '<p class="comment-form-email">' .
'<label for="email">' . __( 'Email' ) . '</label> ' .
( $req ? '<span class="required">*</span>' : '' ) .
'<input id="email" name="email" type="text" value="' . esc_attr( $commenter['comment_author_email'] ) . '" size="30" tabindex="2"' . $aria_req . ' />' .
'</p><!-- #form-section-email .form-section -->',
'url' => '
<p class="comment-form-url">' .</p>
'<label for="url">' . __( 'Website' ) . '</label>' .
'<input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" tabindex="3" />' .
'
<!-- #<span class="hiddenSpellError" pre="">form-section-url</span> .form-section -->' ) ),
'comment_field' => '<p class="comment-form-comment">' .
'<label for="comment">' . __( 'Comment' ) . '</label>' .
'<textarea id="comment" name="comment" cols="45" rows="8" tabindex="4" aria-required="true"></textarea>' .
'</p><!-- #form-section-comment .form-section -->',
'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="%s">%s</a>. <a title="Log out of this account" href="%s">Log out?</a></p>
' ), admin_url( 'profile.php' ), $user_identity, wp_logout_url( apply_filters( 'the_permalink', get_permalink( $post_id ) ) ) ),
'comment_notes_before' => '<p class="comment-notes">' . __( 'Your email is <em>never</em> published nor shared.' ) . ( $req ? __( ' Required fields are marked <span class="required">*</span>' ) : '' ) . '</p>',
'comment_notes_after' => '<dl class="form-allowed-tags"><dt>' . __( 'You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes:' ) . '</dt> <dd><code>' . allowed_tags() . '</code></dd>',
'id_form' => 'commentform',
'id_submit' => 'submit',
'title_reply' => __( 'Leave a Reply' ),
'title_reply_to' => __( 'Leave a Reply to %s' ),
'cancel_reply_link' => __( 'Cancel reply' ),
'label_submit' => __( 'Post Comment' ),
); ?>
The parameters of $arg are self-defined by names. Also remember that you can leave $arg as null if you wish and it will use the default.
You can also customize $arg using the comment_form_default_fields filter.
Example: If you wanted to hide the URL field on your form, you can simply insert the following code to your functions.php file:
add_filter('comment_form_default_fields', 'mytheme_remove_url');
function mytheme_remove_url($arg) {
$arg['url'] = '';
return $arg;
}
All fields are also each passed through a filter of the form comment_form_field_$name
This gives us more options to use for each way of changing our output.
$name is the value used in the array of fields. So we can also hide it using the following:
add_filter('comment_form_default_fields', 'mytheme_remove_url');
function mytheme_remove_url($arg) {
$arg['url'] = '';
return $arg;
}
Using the comment_form() function is an excellent way to keep the code within your template clean. It gives you more ways to customize the comments form using sets of filters.
For users of WordPress 3.0 it is suggested you use this new code to replace the old style comment form code.
Using more hooks to customize our comments_form. Here are some more options and examples to show more on how this can be used.
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:
array( 'author' => '<p class="comment-form-author">...', 'email' => '<p class="comment-form-email">...', 'url' => '<p class="comment-form-url">...' );
This simple method shows the generic way the code can display, but using other modifications you can change more fields like this:
function my_fields($fields) {
$fields['new'] = '<p>a new input field is here</p>';
return $fields;
}
add_filter('comment_form_default_fields','my_fields');
This allows us to add a new input field, or to modify the existing fields.
Fields are not the only items that can be changed. There is also a comment_form_defaults filter as well. It gets the surrounding text of the comments form.
$defaults = array( 'fields' => apply_filters( 'comment_form_default_fields', $fields ), 'comment_field' => '<p class="comment-form-comment">...', 'must_log_in' => '<p class="must-log-in">...', 'logged_in_as' => '<p class="logged-in-as">...', 'comment_notes_before' => '<p class="comment-notes">...', 'comment_notes_after' => '<dl class="form-allowed-tags">...', 'id_form' => 'commentform', 'id_submit' => 'submit', 'title_reply' => __( 'Leave a Reply' ), 'title_reply_to' => __( 'Leave a Reply to %s' ), 'cancel_reply_link' => __( 'Cancel reply' ), 'label_submit' => __( 'Post Comment' ), );
Everything that is displayed as a section of the comment form area are defined in this one place, so they can be modded to your liking.
Remember, that unlike the fields, when you add new parts here it won’t change anything. The fields get pushed through for display, so these
are just settings that get used randomly.
Filters are not the only way to change this. The comment_form function can accept an array of arguments as different parameters, and each of those
will modify the form as well. If you wanted to make a simple modification to alter the wording of “leave a reply” – Then you could change the following:
<?php comment_form(array('title_reply'=>'Leave a Reply, And Voice Yourself')); ?>
This allows us to have a more simple way of making changes without all the hassle of filters, but remember that the filters can also be useful and more powerful for other operations.
While the comment form is generated there are also some action hooks being called. If you choose to put something into the form itself while it is being generated you can do so by using the following:
• 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, mainly for backward compatibility)
• comment_form_after
• comment_form_comments_closed
Don’t forget your styling! Each part of the comment form contain classes and id’s that can be styled using CSS. You can check out the HTML output and see all of the entries to style to your liking. The output is also semantic and contains label tags.
I myself have been using this new function in creating themes for WordPress 3.0 and have found it to be really useful. If used correctly you can accomplish many different results that can better help your coding of a comments form for yourself or a client. Play around with the code and have fun – Feel free to ask any questions. Enjoy!
Get The Only Freelancer crash course you will ever need to read!
My name is Kevin. I am a 30 year old freelance web designer. I have been working with HTML, CSS, and PHP for 6+ years - And creating websites using Wordpress for 3 years. I enjoy creating websites and also doing some graphic design using Photoshop and Illustrator. I hope everyone enjoys reading my articles and I look forward to your questions, comments, and feedback.
Monday, November 21st, 2011 22:06
thanks, that helped a lot. However, its still not clear how we can change the label of the textarea section. Its not in the filter as you posted it, and havent been able to find it somewhere else so far.
Monday, November 21st, 2011 20:39
I recently started a blog, and I was just wondering how people have promoted their blogs online to get more followers so you aren’t just typing to nothing out in the internet?
Oh, and for my blog, I don’t really want my friends to be my followers, unless they find it on their own. My blog is about something that most of my friend’s can’t really help me with. (Photography is the main subject)
Tuesday, November 15th, 2011 17:00
There are some attention-grabbing deadlines in this article but I don?t know if I see all of them heart to heart. There’s some validity however I’ll take hold opinion till I look into it further. Good article , thanks and we wish more! Added to FeedBurner as well
Tuesday, November 15th, 2011 11:41
I’m still attaining understanding of your stuff, but I’m making my in place too. I absolutely enjoy reading through through all that’s released inside your blog.Continue the great work. I loved it!
Thursday, November 10th, 2011 20:49
Just use your imagination. Stories or characters of movies that you watched and liked that you want to be made in a single story or movie.
Thursday, November 10th, 2011 20:48
We want the movie to be
~Really Scary (Jump out of your skin bout to cry scary)
~PG 13 (has to be PG13)
~Something that isn’t boring
~Possibly old (black and white, doesn’t have to be though)
Please find as many movies as you can. If you are able to find a website that include reviews about the movie too, that would be awesome, but you don’t have to! We don’t plan on going to the movies we just want to like rent a movie and play it at home!
Thanks in advance!
Wednesday, November 9th, 2011 15:52
Thanks for the great tip, seems that there is always something new being added and incorporaated into WordPress. I guess that is why it is my clients favorite CMS. I will surely use this.
Tuesday, November 8th, 2011 20:15
Useful tutorial, thanks :) We’re using the wordpress hooks a lot more since 3.2
Saturday, November 5th, 2011 20:33
Thank you for that great post. This is very useful for all people.
Friday, November 4th, 2011 19:27
Awfully informative appreciate it, It is my opinion your subscribers may possibly want far more information of this nature keep up the great hard work.
Monday, October 24th, 2011 15:28
Hey guys love the blog I will add this site to my favorites and visit again .. :)
Sunday, October 23rd, 2011 15:13
Truly enlightening cheers, I believe your current readers will likely want a lot more posts of this nature continue the good work.
Friday, October 21st, 2011 17:22
We are in the process of stripping wallpaper from our kitchen and dining room and painting. We have successfully removed all of the wallpaper, except for very hard to access areas, where the wallpaper goes down behind our kitchen counters. We have scraped, used wallpaper stripper, and everything else we can thing of to try to remove it, but there are still several small pieces of wallpaper sticking up from behind the counters that are almost impossible to pull out. We are not going to remove the counters, so is there any other method to try?
Wednesday, October 19th, 2011 17:38
Very Nice website. I recently engineered mine and i was searching for some concepts and you gave me a couple of. may i ask you whether or not you developed the web site by youself ?
Monday, October 17th, 2011 14:38
as a wordpress theme developer this is a god-send, wp3 yeah baby!
Sunday, October 16th, 2011 07:22
Hi! Nice article. Gain some insights. A question though: How can i combine this with Facebook logins?
Saturday, October 15th, 2011 13:21
Very nice blog on this website. It is really difficult to get this kind of with useful information. I am relieved I came upon this site. I will eagerly look forward to your upcoming updates.
Thanks for sharing it
Thursday, October 13th, 2011 05:15
I’ve been follow your blog for four days now and i should say i am starting to enjoy your article. and now how do i subscribe to your blog? i like, Hi admin, i have bookmarking your site to my regedit, Nearly all of whatever you say is astonishingly legitimate and it makes me wonder why I hadn’t looked at this with this light before. This particular piece really did turn the light on for me personally as far as this specific subject goes. Nevertheless at this time there is actually 1 point I am not really too comfy with so while I attempt to reconcile that with the core theme of the position, allow me see what all the rest of your readers have to point out.Well done.
thank you
cancer-htc
Thursday, October 13th, 2011 04:09
Truly beneficial appreciate it, I’m sure your current subscribers may very well want considerably more posts like this carry on the great hard work.
Wednesday, October 12th, 2011 16:17
Genuinely enlightening appreciate it, I believe your trusty visitors may perhaps want considerably more content similar to this continue the good content.
Monday, October 10th, 2011 21:36
one bit of software I use is firebug which is a plugin for firefox. it’s great for just clicking where I want to edit and it shows me the code in the bottom and also the css. very easy and I get everything where I want it.
Monday, October 10th, 2011 04:56
Extraordinarily informative appreciate it, I do believe your current readers would most likely want way more stories such as this carry on the good work.
Sunday, October 9th, 2011 14:43
Very usefull posting, I’m gonna implement to my personal blogs. Thanks a lot.
Sunday, October 9th, 2011 16:02
i need to know how much weight can i lose in a week without endangering my health?
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
Elvin
Tuesday, August 23rd, 2011 18:26
I wanted to start my own blog and I was looking for your suggestions for which sites you think are the best to start one with. . I want to be able to post pictures, text, and music (maybe).. I only want to use a free blog host..
Larry
Monday, August 15th, 2011 10:06
Very nice post. I just stumbled upon your weblog and wished to say that I have really enjoyed browsing your blog posts. After all I’ll be subscribing to your rss feed and I hope you write again soon!
Jenna
Sunday, August 14th, 2011 22:31
i am working on alot of this now, and want to know what else we can do..question, does all o this require php knowledge?
Elisha Matzke
Sunday, August 14th, 2011 08:35
I love your blog and just wanted to tell you how much I appreciate you posting!
Stephanie
Monday, August 15th, 2011 12:23
This is just what I’ve been looking for. Thanks for the scripts, it really helped me.
Marty
Saturday, August 20th, 2011 00:52
Thanks for a very interesting web site. What else could I get that kind of information written in such an ideal means? I’ve a mission that I am just now working on, and I have been at the look out for such info.
Phanton
Tuesday, August 23rd, 2011 18:19
THank you the code helped me alot with some comments options.
Torreto
Monday, August 22nd, 2011 10:04
I wish to show my affection for your kindness giving support to people that should have help on this content. Your very own dedication to passing the message throughout has been especially advantageous and has usually made ladies just like me to reach their targets. Your personal interesting hints and tips can mean a lot a person like me and extremely more to my colleagues. Best wishes; from all of us.
Jake
Monday, August 22nd, 2011 04:18
Hey, I was thinking, do you ever welcome guest content? If that’s the case, can you please let me know what would I have to do to be able to write an article for this blog?
simone
Friday, July 15th, 2011 17:53
hi there,
great post, it helped me a great deal in customizing my form. I was just wondering whether it is possible to replace the submit button with an image without changing the core file.
It looks as though there’s no filter that can be easily applied to the input/submit part of the form…anyone has worked out how to get it done properly?
the only thing I can think of is filtering the whole form output before display and replace the input button with reg expr. It sounds like a dodgy workaround though
Rean John Uehara
Saturday, July 16th, 2011 02:38
Hi, I think these are relevant to your interest: http://wordpress.org/support/topic/replace-and-style-submit-button-on-comments-submit-comment
http://wordpress.org/support/topic/changing-post-comment-button
anlt
Friday, March 4th, 2011 08:19
i use wordpress for a year,have been using default comment form.get a lot of spam comment,i am gonna add a robo check thing to my comment form.this post is the most helpful one.it is just what i need,thanks.
Joe Hana
Friday, February 25th, 2011 18:29
Ottopress:
“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:”
You
“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:”
Do you know how much is the chance that 2 different individuals (even if they write about the same topic) use EXACTLY the same wording to explain things?
Geoff
Monday, October 11th, 2010 18:58
I found this post before the Otto post and Deluxe Blog Tips post, and I agree – Kevin should’ve given the other guys some credit too!
Anyway, good post nonetheless, but I found it easier to just edit the “comment-template.php” file in the “wp-includes” folder.
Is it a bad thing that I did this?
I understand that anything I change in the “wp-includes” folder could be deleted if I upgraded WordPress, but if I made a back-up first and copied it back over after the update, I should be fine.
anlt
Wednesday, March 16th, 2011 02:42
when i try to copy the code,i find i have to copy line number with the code.it is unconvinient.i am sure there is better code plugins.suggest you use them instead.
Storm
Thursday, April 7th, 2011 23:40
Hi,
Is there any way to hide the comment form on individual posts, while leaving existing comments, or close comments but leave the existing comments. Don’t want to do it site wide, would be nice if it could be done on a per post basis, or create a category for posts with closed comments, while still displaying the existing comments.
I have searched everywhere, can’t seem to find a solution.
Thanks
Kent
Saturday, May 7th, 2011 03:22
I agree with ryan. Very similar to the other post. Nice article though, appreciate your work.
Epic
Wednesday, May 4th, 2011 00:51
Well this is the page I found to remove some of the default comment fields, so thanks for that.
max
Saturday, April 9th, 2011 16:39
Good guide Kevin! Thanks a lot!
Juicers
Tuesday, September 28th, 2010 20:50
Very good article. Always cool to learn something new about WP 3.0
Dima
Thursday, September 23rd, 2010 22:35
go? bolshoe spasibo vam za sait/
Jeff
Saturday, August 28th, 2010 03:13
So, you basically copied two other posts, slapped them together on a page and called it you own work. Not even a link back to their sites… good job!
You more than likely won’t publish this, but at least give credit where credit is due.
Otto –
http://ottopress.com/2010/wordpress-3-0-theme-tip-the-comment-form/
Deluxe Blog Tips -
http://www.deluxeblogtips.com/2010/05/display-comment-form-wordpress-30.html
edurup
Friday, August 27th, 2010 23:18
very good tuts thanks a lot
Filip
Friday, August 27th, 2010 16:29
great article…i’m gonna test it tonight :) thank you!
John W. Vermaes
Saturday, August 28th, 2010 03:44
Sadly, comment pages are an often overlooked piece of a website’s puzzle with regard to usability and appearance. It doesn’t really make sense to me, since the comment page is, in my opinion, a very crucial part of a website (assuming you’re looking for feedback / trying to build a community). I think this article is a great stepping stone for pushing a website’s comment page to the forefront during the initial design / development. Thanks for sharing.
Gopalb
Saturday, August 28th, 2010 05:54
great tutorial….but not for new babies….