Tutorial on Adding Background Text to WordPress Comment Box

Because recently it was replaced Hummingbird plug-in to cache WordPress articles, but Hummingbird's cache update mechanism is a bit unscientific. If the cache is updated, it needs to be emptied and regenerated. When someone comments, if the page does not choose to update the cache, it will not be displayed, so we studied adding prompt text in the WordPress comment box.

The effect is as follows:

Implementation method:

There are two ways to add comment background prompt text to WordPress found on the Internet. Most articles are implemented in Method 1, but in recent years, especially in 2021, the theme files are basically not the same as before, so most of them are implemented in Method 2. See how your theme is realized.

Method 1

If your topic comments. php file can directly find the following code similar to

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

Then you can add it directly to this string of code.

 <textarea style="color: gray" onblur="if (this. value==") {this. value='I firmly believe that comments can hit the nail on the head! ';} "onfocus=" if (this. value=='I firmly believe that comments can hit the nail on the head!') {this. value=";}" name="comment" id="comment" cols="60" rows="10" tabindex="4">I firmly believe that comments can hit the nail on the head</ textarea>

Method 2

If you can't see the above code string<textarea name="comment" in your topic comment file, find the following code string

 <? php comment_form(); ?>

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

 <? php comment_form( array( 'comment_field'=>'<textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required" placeholder="Comments need to be reviewed and cached..."></textarea>', )        ); ?>

Cols="45" rows="8" maxlength="65525" This string of codes allows you to view the default foreground display of your theme, and then replace it with the theme 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 4.9.6, if "Display comment cookie and select to add check box". Select in "Discussion Settings", and the cookie consent check box will be added to the zone.

 $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 in the above code in the 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 refers to the following articles:

Instructions for adding WordPress comment box

Custom comment formcomment_form()

Function Reference/comment form