1

I have some code that displays my comment form and my custom validation, what I'd like to do is add a div right underneath the title, but I'm not sure how to do that because that code is generated...

The Code:

<?php $comment_args = array(
    'title_reply' => 'Leave a Comment', 
    'comment_notes_before' => '',  
    'fields' => apply_filters( 'comment_form_default_fields', array(
    'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name:' ) . '</label> ' . ( $req ? '<span>*</span>' : '' ) .
    '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30" required /></p>', 
    'email'  => '<p class="comment-form-email">' .
    '<label for="email">' . __( 'E-mail:' ) . '</label> ' . ( $req ? '<span>*</span>' : '' ) .
    '<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30" required />'.'</p>', 
    'url'    => '' ) ), 
    'comment_field' => '<p>' . '<label for="comment">' . __( 'Comment:' ) . '</label>' . '<textarea id="comment" name="comment" cols="45" rows="8" required></textarea>' . '</p>', 
    'comment_notes_after' => '', 
    'label_submit' => __( 'Post' ),
    );
    comment_form($comment_args);
?>

Which Outputs:

<h3 id="reply-title" class="comment-reply-title">Leave a Comment <small><a rel="nofollow" id="cancel-comment-reply-link" href="/93/#respond" style="display:none;">Cancel reply</a></small></h3>

<form action="http://ourpictureshare.com/wp-comments-post.php" method="post" id="commentform" class="comment-form">
      <p class="logged-in-as">Logged in as <a href="http://ourpictureshare.com/wp-admin/profile.php">admin</a>. <a href="http://ourpictureshare.com/wp-login.php?action=logout&amp;redirect_to=http%3A%2F%2Fourpictureshare.com%2F93%2F&amp;_wpnonce=e330f94e35" title="Log out of this account">Log out?</a></p>
      <p><label for="comment">Comment:</label><textarea id="comment" name="comment" cols="45" rows="8" required=""></textarea></p>                                              
      <p class="form-submit">
          <input name="submit" type="submit" id="submit" value="Post">
          <input type="hidden" name="comment_post_ID" value="93" id="comment_post_ID">
          <input type="hidden" name="comment_parent" id="comment_parent" value="0">
      </p>
      <input type="hidden" id="_wp_unfiltered_html_comment_disabled" name="_wp_unfiltered_html_comment" value="70754f57d7"><script>(function(){if(window===window.parent){document.getElementById('_wp_unfiltered_html_comment_disabled').name='_wp_unfiltered_html_comment';}})();</script>
</form>

What I am looking for:

<h3 id="reply-title" class="comment-reply-title">Leave a Comment <small><a rel="nofollow" id="cancel-comment-reply-link" href="/93/#respond" style="display:none;">Cancel reply</a></small></h3>

<!-- I added this line --> <div id="MY_DIV_HERE"></div> <!-- I added this line -->

<form action="http://ourpictureshare.com/wp-comments-post.php" method="post" id="commentform" class="comment-form">
    <p class="logged-in-as">Logged in as <a href="http://ourpictureshare.com/wp-admin/profile.php">admin</a>. <a href="http://ourpictureshare.com/wp-login.php?action=logout&amp;redirect_to=http%3A%2F%2Fourpictureshare.com%2F93%2F&amp;_wpnonce=e330f94e35" title="Log out of this account">Log out?</a></p>
    <p><label for="comment">Comment:</label><textarea id="comment" name="comment" cols="45" rows="8" required=""></textarea></p>                                              
    <p class="form-submit">
        <input name="submit" type="submit" id="submit" value="Post">
        <input type="hidden" name="comment_post_ID" value="93" id="comment_post_ID">
        <input type="hidden" name="comment_parent" id="comment_parent" value="0">
  </p>
  <input type="hidden" id="_wp_unfiltered_html_comment_disabled" name="_wp_unfiltered_html_comment" value="70754f57d7"><script>(function(){if(window===window.parent){document.getElementById('_wp_unfiltered_html_comment_disabled').name='_wp_unfiltered_html_comment';}})();</script>
</form>

Any help is appreciated.

Thanks,
Josh

2

If you want to add some custom HTML between the </h3> and the <form> tags, you can try the following:

/**
 * Add custom HTML between the `</h3>` and the `<form>` tags in the comment_form() output.
 */
add_action( 'comment_form_before', function(){
    add_filter( 'pre_option_comment_registration', 'wpse_156112' );
});

function wpse_156112( $comment_registration )
{
     // Adjust this to your needs:
     echo '<div>Custom HTML between the closing H3 and opening FORM tags.</div>'; 

    remove_filter( current_filter(), __FUNCTION__ );
    return $comment_registration;
}

where the output is:

...</h3>
<div>Custom HTML between the closing H3 and opening FORM tags.</div>
<form>...

Otherwise you can use the comment_form_top action to add custom HTML right after the opening <form> tag:

/**
 * Add custom HTML just after the opening `<form>` tag in the comment_form() output.
 */
add_action( 'comment_form_top', function(){
     // Adjust this to your needs:
     echo '<div>Custom HTML just after the opening FORM tag.</div>'; 
});

with the following output:

<form>
    <div>Custom HTML just after the opening FORM tag.</div>
    ...

Here you can see the comment form of the TwentyTwelve theme with both methods activated:

comment form

  • 1
    This is a great solution, I had tried some jQuery, but because this was displaying validation, when the form submitted my div was gone...this keeps the div there and works like it should - exactly what I was looking for!! Thanks :-) – Josh Rodgers Jul 29 '14 at 13:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.