The Ultimate Guide to WordPress 3.0 Comment Form Customization

Posted in WordPress • 997 days ago • Written by Kevin Stanley • 163 Comments

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:

comments.php file

<?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:

Default $arg Values

<?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:

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.

Customizing with Hooks

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.

Comment Form Default

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

And Yes, There is More!

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:

Action hooks.

• 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

Styling with CSS

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.

In Closing…

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!