How to Add a Character Counter to Excerpt Metabox in WordPress

Home » Snippets » How to Add a Character Counter to Excerpt Metabox in WordPress
1

Created with:

Visibility: 

public

Creator: WPTurbo Team

Customize with WPTurbo AI
X

Add Snippet To Project

New Project
Add To Existing Project

As a WordPress user, you’re probably familiar with the excerpt metabox located beneath the post editor. The excerpt is a short summary of your post that is usually displayed on the homepage or archive pages. However, WordPress doesn’t provide a character count for your excerpts, which can make it difficult to know if you’re meeting your desired word limit. In this article, we’ll show you how to add a character counter to the excerpt metabox so you can easily keep track of how many characters you’ve written.

					function wpturbo_excerpt_character_count() {
    global $post;
    if ( $post && $post->post_type == 'post' ) {
        $excerpt = get_post_field( 'post_excerpt', $post->id );
        $excerpt_length = mb_strlen( $excerpt );
        ?>
        <script>
            jQuery(document).ready(function(){
                jQuery('#excerpt').after('<p><small>Excerpt length: <span id="excerpt-length"><?php echo $excerpt_length; ?></span>/<span id="excerpt-max"><?php echo get_post_field('post_excerpt', $post->id) ? '150' : '0'; ?></span></small></p>');
                jQuery('#excerpt').keyup( function(){
                    var maxChars = <?php echo get_post_field('post_excerpt', $post->id) ? '150' : '0'; ?>;
                    var count = jQuery('#excerpt').val().length;
                    jQuery('#excerpt-length').html(count);
                    if ( maxChars && count > maxChars ) {
                        jQuery('#excerpt').addClass('error');
                    }
                    else {
                        jQuery('#excerpt').removeClass('error');
                    }
                });
            });
        </script>
        <?php
    }
}
add_action( 'edit_form_after_title', 'wpturbo_excerpt_character_count' );
				

This code snippet adds a character counter to the excerpt metabox on the edit post screen in WordPress. This makes it easier for WordPress users to know how many characters they can enter, which is especially useful for those on a deadline.

The function wpturbo_excerpt_character_count() is responsible for creating the character counter. It first checks if the post type is "post" before proceeding, so this functionality will only be added to the post editor.

Inside the function, we use the get_post_field() function to retrieve the current excerpt field of the post. We then use mb_strlen() to count the number of characters in this excerpt field.

After that, we create a script to insert an HTML element into the excerpt metabox. We use jQuery(document).ready() to wait until the document is loaded before running the script.

We target the excerpt metabox by its ID #excerpt and then add the character counter element using the after() method. This HTML element will show the current character count and maximum character count that can be entered in the excerpt field.

get_post_field('post_excerpt', $post->id) is used to retrieve the current post excerpt. If there is any excerpt available, then we set 150 as the maximum character count for the excerpt field. Otherwise, we set it to 0.

Next, we add a keyup() event listener to the excerpt metabox, which means that every time a user types a character, it will trigger this event. Inside the function, we retrieve the maximum character count from the previously set maxChars and count how many characters have been typed into the excerpt field.

We then update the HTML element with the new character count using jQuery's html() method. If the character count exceeds the maximum character count, we add the class error to the excerpt metabox. Otherwise, we remove the error class from the excerpt metabox.

Finally, we hook the wpturbo_excerpt_character_count() function onto the edit_form_after_title action hook to ensure it is displayed on the edit post screen.

Register an account to save your snippets or go Pro to get more features.