Custom code for modifying the WordPress comment form

Customizing the WordPress Comment Form

Custom Code Solution

The following solutions allow you to modify the WordPress comment form appearance and structure using hooks. Add these code snippets to your theme's functions.php file.

Basic comment form wrapper styling:

add_action('comment_form_before', 'custom_comment_form_wrapper_start');
add_action('comment_form_after', 'custom_comment_form_wrapper_end');

function custom_comment_form_wrapper_start() {
    echo '<div class="custom-comment-section">';
}

function custom_comment_form_wrapper_end() {
    echo '</div>';
}

Modify comment form fields and labels:

add_filter('comment_form_default_fields', 'custom_comment_form_fields');

function custom_comment_form_fields($fields) {
    // Modify the name field
    $fields['author'] = '<p class="comment-form-author">
        <label for="author">Your Name</label>
        <input type="text" id="author" name="author" required="required" size="30" />
    </p>';
    
    // Modify the email field
    $fields['email'] = '<p class="comment-form-email">
        <label for="email">Email Address</label>
        <input type="email" id="email" name="email" required="required" size="30" />
    </p>';
    
    // Remove the website field
    unset($fields['url']);
    
    return $fields;
}

Customize comment form arguments:

add_filter('comment_form_defaults', 'custom_comment_form_arguments');

function custom_comment_form_arguments($defaults) {
    $defaults['title_reply'] = 'Leave Your Comment';
    $defaults['comment_field'] = '<p class="comment-form-comment">
        <label for="comment">Your Message</label>
        <textarea id="comment" name="comment" cols="45" rows="8" required="required"></textarea>
    </p>';
    $defaults['label_submit'] = 'Post Comment';
    $defaults['class_submit'] = 'custom-submit-button';
    
    return $defaults;
}

Add custom CSS styles (add to your theme's style.css file):

.custom-comment-section {
    max-width: 800px;
    margin: 2em auto;
    padding: 20px;
    background: #f8f8f8;
    border-radius: 5px;
}

.comment-form-author input,
.comment-form-email input,
.comment-form-comment textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.custom-submit-button {
    background: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.custom-submit-button:hover {
    background: #0056b3;
}

Alternative Plugin Solutions

If you prefer a plugin-based solution, consider these options:

1. wpDiscuz - Feature-rich comment system with social login and real-time updates
2. Thrive Comments - Premium comment system focused on engagement
3. De:comments - Modern commenting system with social features

Notes

• Test the code in a development environment first
• Adjust CSS values to match your theme's design
• Some themes may require additional styling adjustments
• The code examples assume a modern WordPress installation (5.0+)
• Remember to backup your files before making changes