Tutorial on Adding Background Text to WordPress Comment Box

Recently, I switched tothe Hummingbird plugin to cacheWordPress posts. However, Hummingbird's cache update mechanism is somewhat inefficient; updating the cache requires clearing everything and regenerating it from scratch. When someone leaves a comment, if the page cache is not updated, the comment won't be displayed. This led me to research adding prompt text to the WordPress comment box.The effect is as follows:   Implementation Method:Online searches reveal two main methods for adding background prompt text to the WordPress comment box. Most articles use Method 1. However, in recent years, especially now, theme files are no longer written as they used to be, so most implementations use Method 2. Choose based on how your theme is built.

Method 1

If you can directly find code similar to the following string in your theme's comments.php file

<textarea name="comment" id="comment" cols="60" rows="10" tabindex="4"></textarea>

Then you can add it directly within this code string.

<textarea style="color:gray" onblur="if (this.value == ”) {this.value = ‘我坚信，评论可以一针见血！’;} " onfocus="if (this.value == ‘我坚信，评论可以一针见血！’) {this.value = ”;}" name="comment" id="comment" cols="60" rows="10" tabindex="4">我坚信，评论可以一针见血！</textarea>

Method 2

If you cannot find the above code string <textarea name="comment" in your theme"s comment file, then look for the following code string

<?php comment_form(); ?>

Then replace the above code with the following string to achieve the effect.

	<?php comment_form(
    array(
         'comment_field' => '<textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required" placeholder="评论需审核，评论有缓存…"></textarea>',
            )       
); ?>

For the code string cols="45" rows="8" maxlength="65525", you can check what your theme displays by default on the frontend and replace it with your theme"s code. Default comment area code

$fields =  array(

  'author' =>
    '<p class="comment-form-author"><label for="author">' . __( 'Name', 'domainreference' ) .
    ( $req ? '<span class="required">*</span>' : '' ) . '</label>' .
    '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) .
    '" size="30"' . $aria_req . ' /></p>',

  'email' =>
    '<p class="comment-form-email"><label for="email">' . __( 'Email', 'domainreference' ) .
    ( $req ? '<span class="required">*</span>' : '' ) . '</label>' .
    '<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) .
    '" size="30"' . $aria_req . ' /></p>',

  'url' =>
    '<p class="comment-form-url"><label for="url">' . __( 'Website', 'domainreference' ) . '</label>' .
    '<input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) .
    '" size="30" /></p>',
);

Starting from version 4.9.6, if „Show comments cookies opt-in checkbox“ is checked in the „Discussion Settings“, a cookie consent checkbox will be added to the area.

$fields['cookies'] =  '<p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes"' . $consent . ' />' . '<label for="wp-comment-cookies-consent">' . __( 'Save my name, email, and website in this browser for the next time I comment.' ) . '</label></p>';

Note: To use the variables from the above code in a custom callback function, you must first set these variables in the callback using the following:

$commenter = wp_get_current_commenter();
$req = get_option( 'require_name_email' );
$aria_req = ( $req ? " aria-required='true'" : '' );

$consent = empty( $commenter['comment_author_email'] ) ? '' : ' checked="checked"';

This article references the following posts:Adding Guidance Instructions to WordPress Comment Box Custom Comment Form comment_form() WordPress Official Documentation Function Reference/comment form