Character Counter Under the Comment Box
Shows how many characters are left while typing a comment and stops input at the limit you set.
Opens WPIDE on
Code
// Maximum comment length in characters.
$wpide_comment_max_chars = 1500;
add_filter( 'comment_form_field_comment', function ( $field ) use ( $wpide_comment_max_chars ) {
$field = preg_replace( '/<textarea\b/', '<textarea maxlength="' . (int) $wpide_comment_max_chars . '"', $field, 1 );
return $field . '<p class="wpide-comment-counter" aria-live="polite" style="font-size:.85em;opacity:.75;margin-top:.25em"></p>';
} );
add_action( 'wp_footer', function () use ( $wpide_comment_max_chars ) {
if ( ! is_singular() || ! comments_open() ) {
return;
}
?>
<script>
( function () {
var field = document.getElementById( 'comment' );
var out = document.querySelector( '.wpide-comment-counter' );
if ( ! field || ! out ) {
return;
}
var max = <?php echo (int) $wpide_comment_max_chars; ?>;
function update() {
out.textContent = ( max - field.value.length ) + ' characters left';
}
field.addEventListener( 'input', update );
update();
} )();
</script>
<?php
} );Notes
Pair it with the minimum and maximum comment length snippet for a server-side check.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.