May 07, 2022

Customize Comment Form in WordPress

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

Customize Comments Form in WordPress

Customizing WordPress comments form can be helpful to change the look and feel of form to align with 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 comments form in WordPress by utilizing some useful filters. 

 

How to Customize WordPress Comment Form

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

 

Add Custom Fields to 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 custom label or message before 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 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 good use of customizing WordPress comment form is to add a google reCAPTCHA field to prevent spam comments. To add a google reCAPTCHA to form a plugin can be used or it can be manually added. Following code snippet will add google reCAPTCHA to WordPress comment form using comment_form_after_fields filter and preprocess_comment to verify reCAPCTHA.

// 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 custom message before comment form. A message can be to make it clear to visitor what fields are required etc. 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 website's engagement flow. The code snippets in this post can be modified as needed and it is always a good practice to backup the functions.php file before making any changes to it.

Home