WordPress theming: getting comment_form into your theme

Picture of code on a computer screenWordPress 3.0 has a new php call: comment_form. It’s awesome in that it replaces about half the code in a typical theme’s comments.php file. But it’s not in most legacy themes, and the way to add it to your theme is not so obvious. Also, it’s nerve-wracking to customize because there’s no HTML to edit, no place where you can simply insert your little disclaimer or change a label on a form element. Suddenly, there’s just this default form box appearing on your pages and not necessarily looking the way you want it to look.

Otto wrote a  thorough guide to comment_form in which he covers everything you ought to know about the comment_form and how to customize it, but he doesn’t break the instructions down into the sort of “put this code here, and that code there” steps many of us need. This is understandable, since he’s rightfully saying you should understand how to code if you’re going to mess with stuff.

But the fact is, many of us are self-taught, and we’re seeing plugins break because we don’t have this call in our themes. We don’t want to take programming courses. We just want to get stuff going. So I’m going to detail a few operations that were of interest to me on my own themes. I’m afraid if you want details on other customizations, I probably can’t help you. But here you go:

Working in the comment_form hook

Otto does actually explain this first step, but I’ll re-tell it here just to be complete. To get the hook into your theme, find this line in your theme’s comments.php:

[sourcecode language="css"]<?php if (‘open’ == $post->comment_status) : ?>[/sourcecode]

Delete it and everything below it all the way to the bottom of the file. Now insert in its place:

[sourcecode language="css"]<?php comment_form(); ?>[/sourcecode]

That’s it! It’s in your file. If you’re satisfied with how it looks, you’re done. But a lot of people are not happy at this point. They want to add a bit of text they had above the comment box (that was my need), or change a label or something.

Adding text above the comment_form

The WordPress codex lists some arguments you can put into your php call for comment_form. An argument just modifies how the php code is displayed – it appears in between the parentheses that come after the call. So, for example:

[sourcecode language="css"]<?php comment_form(); ?>[/sourcecode]

becomes

[sourcecode language="css"]<?php comment_form(array( ‘comment_notes_before’ => ‘Blah Blah Blah.’)); ?>[/sourcecode]

The argument is “array( ‘comment_notes_before’ => ‘Blah Blah Blah.’)”. Most of us who don’t really understand php have worked with arguments in such calls as our categories (arguments determine what order they’re listed in, whether the number of comments is listed after, whether child categories get listed, etc.), so my recommendation is that you stick with arguments to modify your comment_form call, and do the least modification you can live with. The above example will cause the text “Blah Blah Blah” to show just above the comment form. You might use that space for a disclaimer or to remind commenters to play nice or something.

I’m going to copy the arguments over from the Codex here, and then show you how to work with them:

[sourcecode language="css"]
<?php $defaults = array(
‘fields’ => apply_filters( ‘comment_form_default_fields’, $fields ),
‘comment_field’ => ‘<p><label for=”comment”>’ . _x( ‘Comment’, ‘noun’ ) . ‘</label><textarea id=”comment” name=”comment” cols=”45″ rows=”8″ aria-required=”true”></textarea></p>’,
‘must_log_in’ => ‘<p>’ . 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>’ . 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’ => ‘<p>’ . __( ‘Your email address will not be published.’ ) . ( $req ? $required_text : ” ) . ‘</p>’,
‘comment_notes_after’ => ‘<p>’ . sprintf( __( ‘You may use these <abbr title=”HyperText Markup Language”>HTML</abbr> tags and attributes: %s’ ), ‘ <code>’ . allowed_tags() . ‘</code>’ ) . ‘</p>’,
‘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’ ),
);
?>
[/sourcecode]

See “comment_notes_before” there? Now look again at what I did with it:

[sourcecode language="css"]
<?php comment_form(array( ‘comment_notes_before’ => ‘Blah Blah Blah.’ )); ?>[/sourcecode]

Changing a label

Let’s say you don’t like the label “Comment” on your comment field. You want it to say “Type your message here” instead. After reading the codex, you realize the argument you want to use is “comment_field.” You just replace “comment_notes_before’ => ‘Blah Blah Blah.” with “comment_field’ => ‘<p><label for=”comment”>’ . _x( ‘Type your message here’, ‘noun’ ) . ‘</label><textarea id=”comment” name=”comment” cols=”45″ rows=”8″ aria-required=”true”></textarea></p>“. See what I did? I replaced one argument with another found in the Codex, making the needed alteration (“Comment” replaced with “Type your message here”), and I’m done.

What if you want to make two changes to your comment form? Combining arguments is simple – you just use a comma:

[sourcecode language="css"]
<?php comment_form(array( ‘comment_notes_before’ => ‘Blah Blah Blah.’ , ‘comment_field’ => ‘<p><label for=”comment”>’ . _x( ‘Comment:’, ‘noun’ ) . ‘</label><textarea id=”comment” name=”comment” cols=”45″ rows=”8″ aria-required=”true”></textarea></p>’)); ?>[/sourcecode]

There’s the comma, in between ‘Blah Blah Blah.’ and ‘comment_field’ =>. You can add additional comments after that, using other comments to separate them.

Styling

If you want to style parts of your form, this is easier. Just open up your source code to find what CSS IDs it’s assigned. Put that CSS ID into your stylesheet and make the changes you need to make.

Comments

  1. says

    A somewhat cleaner approach can be done via filters.

    For example, to change “Comment” into “Type your message here” in the comment_field, for example, this code would do the trick:

    function change_comment_field($fields) {
    $fields['comment_field'] = str_replace( ‘Comment’, ‘Type your message here’, $fields['comment_field'] );
    return $fields;
    }
    add_filter(‘comment_form_defaults’,'change_comment_field’);

    You can add that code into a theme’s functions.php file, or into a plugin of your own creation, or at the top of the comments.php file (which makes the most sense, actually). Whatever.

    You can change multiple fields in the same function, if you want. Or you can have a different function for each field. Whatever makes the most sense for your particular use case.

  2. says

    Wow this is great, and Otto comment has open my mind, thanks for sharing.

    But I have a question, how do I change the default “name”, “email”, and “website” value, so I can modify the text for better maintenance in the future?

    Is this possible to change the default value?

    Thanks!

  3. says

    THANK YOU!

    Man I have been going through so many websites and none of them are up to date on this matter. Now I actually know where the form is being generated from ha!

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>