May 07, 2022

Customize Comment Form in WordPress

WordPress comes with a default comments form which is functional, but it lacks some customization to fit the needs of the website. Learn how to customize a comment form in WordPress with code examples.

Customize Comments Form in WordPress

Customizing the WordPress comments form can be helpful to change the look and feel of the form to align with the website's theme. Customizing the comments form in WordPress can also be helpful to add branding, add instructions before, add and remove form fields or even change the WP comment form fields order using simple code changes. We are going to demonstrate in this post how to customize the comments form in WordPress by utilizing some useful filters. 

 

How to Customize a WordPress Comment Form

The simplest and most flexible way to customize the comment form in WordPress is by modifying functions.php of the active theme and utilizing some filters.

 

Add Custom Fields to a WordPress Comment Form

By default, WordPress comes with Name, Email and Website fields. But it is also possible to add custom fields using the comment_form_default_fields filter.

// Add custom field to the comment form
add_filter('comment_form_default_fields', 'custom_comment_form_fields');
function custom_comment_form_fields($fields)
{
    $fields['phone'] = '<p class="comment-form-phone">
                            <label for="phone">Phone Number</label>
                            <input type="tel" name="phone" id="phone" class="form-control" value="" />
                        </p>';
    return $fields;
}
 

Change WordPress Comment Textarea Field

It is also possible to modify the default comment textarea field using the comment_form_defaults filter. The code snippet below can be used to change the textrea add a custom label or message before the field.

// Modify the comment textarea
add_filter('comment_form_defaults', 'custom_comment_textarea');
function custom_comment_textarea($args)
{
    $args['comment_field'] = '<textarea name="comment" cols="45" id="comment" class="form-control" placeholder="Your message!!"></textarea>';

    return $args;
}
 

Ordering WordPress Comment Form Fields

It is also possible to adjust or change the WordPress comment form fields order by utilizing the comment_form_default_fields filter. The following code snippet will change the order of comment form fields and move the website field to the end of the form.

// Order comment form fields
add_filter('comment_form_default_fields', 'custom_order_comment_form');
function custom_order_comment_form($fields)
{
    // Move the website field to the bottom
    $website = $fields['url'];

    unset($fields['url']);

    $fields['url'] = $website;

    return $fields;
}
 

Add reCAPTCHA to WordPress Comment Form

One of the good uses of customizing a WordPress comment form is to add a Google reCAPTCHA field to prevent spam comments. To add a Google reCAPTCHA to a form, a plugin can be used or it can be manually added. The following code snippet will add Google reCAPTCHA to the WordPress comment form using the comment_form_after_fields filter and preprocess_comment to verify reCAPTCHA.

// Add reCAPTCHA to the comment form
add_action('comment_form_after_fields', 'custom_comment_form_reCAPTCHA');
function custom_comment_form_reCAPTCHA(): void
{
    echo '<div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>';
}

// Validate reCAPTCHA response
add_filter('preprocess_comment', 'verify_recaptcha_response');
function verify_recaptcha_response($comment_data)
{
    $recaptcha_secret_key = 'YOUR_SECRET_KEY';
    $recaptcha_response = sanitize_text_field($_POST['g-recaptcha-response']);

    $response = wp_remote_post(
        'https://www.google.com/recaptcha/api/siteverify',
        array(
            'body' => array(
                'secret' => $recaptcha_secret_key,
                'response' => $recaptcha_response
            )
        )
    );

    $body = wp_remote_retrieve_body($response);
    $result = json_decode($body);

    if (isset($result->success) && !$result->success) {
        wp_die('reCAPTCHA verification failed. Please try again.');
    }

    return $comment_data;
}
 

Add Custom Instructions Message Before WordPress Comments Form

It is also possible and useful to add some instructions or a custom message before the comment form. A message can be to make it clear to visitors what fields are required etc. The following code snippet will add a custom message before WordPress comment form using the comment_form_before action hook.

// Add custom instructions before the comment field
add_action('comment_form_before', 'custom_comment_form_instructions');
function custom_comment_form_instructions(): void
{
    echo '<p class="comment-form-instructions">Please be respectful in your comments. All comments are moderated.</p>';
}

We demonstrated a basic WordPress comment form customization, which can help increase the website's engagement flow. The code snippets in this post can be modified as needed and it is always a good practice to take a backup of the functions.php file before making any changes to it.

Home