Add a character counter for the excerpt in WordPress

Posted on by Elio Rivero

The excerpt is great for magazine sites where only a small bunch of words can be displayed on the home page. However, the lack of a character counting functionality for the field makes it hard to know how many you already typed in. In this tutorial we will learn how to easily add a character counter for the excerpt.

Overview

To build this, we’re going to use only a JavaScript file with some jQuery based code, and a function that we will plug into the functions.php file of our WordPress theme.

Enqueuing the JavaScript in WordPress

Enter this code into your functions.php file:

define( 'THEME_URI', get_template_directory_uri() );
add_action('admin_enqueue_scripts','ilc_admin_scripts',10,1);

function ilc_admin_scripts($page) {
$post = get_post( $_GET['post'] );
$typenow = $post->post_type;
if($typenow != 'page')
if ($page == 'post.php' || $page == 'post-new.php')
wp_enqueue_script('ilc-excerpt-counter', THEME_URI .'/ilc-excerpt-counter.js', array('jquery'));
}

The first line gets the directory of your WordPress theme and then add the scripts by hooking them into the ilc_admin_scripts function if we are writing or editing a new post.
Next, we register and enqueue our JavaScript file. Replace the path and filename with your own.

Counting the chars with jQuery

We’re going to use the after function from jQuery that will allow us to add a html form field after the excerpt textarea. This text field will be used to display the character counting:

jQuery(document).ready(function(){
jQuery("#excerpt").after("<p style="text-align:center;"><small>Excerpt length: </small><input type="text" value="0" maxlength="3" size="3" id="ilc_excerpt_counter" readonly=""> <small>character(s).</small></p>");
jQuery("#ilc_excerpt_counter").val(jQuery("#excerpt").val().length);
jQuery("#excerpt").keyup( function() {
jQuery("#ilc_excerpt_counter").val(jQuery("#excerpt").val().length);
});
});

After the text field is created, we set up its value to be the length of the excerpt textarea. This will display in the text field the number of characters of the textarea (if it’s the first time, it will be zero).
We then use the keyup event to detect a new keystroke and update the number displayed in the text field.

Conclusion

With this technique you could add character counters to pretty much any textarea in your WordPress theme. For instance, Hybrid theme is bundled with fields to enter meta description and keywords but they do not have a character counter, which is cool to have, since Google only takes the first 156 characters for snippets in search result pages.

Published by Elio Rivero

Software engineer, designer and photographer.

17 thoughts on “Add a character counter for the excerpt in WordPress”

    1. Hi Tarmo, I’ve just double checked the code with TwentyTen and it works perfectly (had first written it for a theme I’m working on). Are you sure that your code is correctly locating the JavaScript file? that was the only thing that had to be modified depending on your theme.

  2. Tarmo, I’ve modified the script loading PHP code to make it a bit more stronger. Check it out and let me know what you think.

  9. Many thanks for this code. Tried a few similar functions, but they all messed up the WYSIWYG editor, especially the internal linking function. Your code work just fine – thanks!

  14. Amazingly, this tutorial from 2010 still almost works in 2014 with WP version 3.8.1 – that’s longevity for you!

    There’s a single change you’ll need to make if you are using a child theme, as is now recommended:

    Instead of the php function get_template_directory_uri(), the function get_stylesheet_directory_url() is needed. The full first line of php code thus become:

    define( 'THEME_URI', get_stylesheet_directory_uri() );

    The rest seems to continue to work fine – impressive!

    1. Hi Ricky, changing it to get_stylesheet_directory_url() would look for the .js file in the child theme and you probably won’t have the file there, so the get_template_directory_uri() call is still the correct one, since it will look for in the parent theme in the case you’re using a child theme and the parent theme has the js.
      Of course, it’s different if you have a child theme and are implementing this only in the child theme, in which case, yes, you would have to use get_stylesheet_directory_url()

Leave a Reply