Change the HTML output of comments

by

I’d like to customize the HTML output of the comment form. I’ve been reading

I’ve been reading how to alter some variables of the comment_form(). The previous link provides a rather good guide to play with that function.

But I’m still unable to change the HTML output of the form. And I would like to wrap some fields inside a container.

With older wordpress versions this could be changed at will in the comments.php function, but doing it that way will break nested comments, so it is not an option.

Is it possible at all to change this html output?

Thanks,

Upon request, a bit more of inormation 🙂 The default html output of comment_form() is:

<p class="comment-form-author"><label for="author">Name</label> <span class="required">*</span><input id="author" name="author" type="text" value="" size="30" aria-required='true' /></p>
<p class="comment-form-email"><label for="email">Email</label> <span class="required">*</span><input id="email" name="email" type="text" value="" size="30" aria-required='true' /></p>
<p class="comment-form-url"><label for="url">Website</label><input id="url" name="url" type="text" value="" size="30" /></p>

I would like to wrap all three paragraphs inside an html element (ie. DIV).

1 Answer
1

Upon request, a bit more of inormation 🙂 The default html output of
comment_form() is:

<p class="comment-form-author"><label for="author">Name</label> <span class="required">*</span><input id="author" name="author" type="text" value="" size="30" aria-required='true' /></p>
<p class="comment-form-email"><label for="email">Email</label> <span class="required">*</span><input id="email" name="email" type="text" value="" size="30" aria-required='true' /></p>
 <p class="comment-form-url"><label for="url">Website</label><input id="url" name="url" type="text" value="" size="30" /></p> I would like to wrap all three paragraphs inside an html element (ie. DIV).

As a matter of fact, this is quite easy! You just need to know the right hooks to use.

The comment_form() function includes, among several other action hooks, two that will suit your needs perfectly: comment_form_before_fields and comment_form_after_fields. You can use these hooks to add your wrapper <div>:

<?php
function wpse53671_comment_form_before_fields() {
    echo '<div>';
}
add_action( 'comment_form_before_fields', 'wpse53671_comment_form_before_fields' );

function wpse53671_comment_form_after_fields() {
    echo '</div>';
}
add_action( 'comment_form_after_fields', 'wpse53671_comment_form_after_fields' );
?>

(Note: if anything else is hooking into these actions, you may need to adjust the callback priority, so that your tags nest properly.

Leave a Comment