Adding An Excerpt Area Character Counter

in WordPress Tutorials

Premium WordPress themes are great as they open up many opportunities that don’t exist with the default WordPress themes. There’s certainly no doubt that some of the best themes out there can make even miniscule sites look slick and professional.

But sometimes theme layouts and designs can cause underlying problems. For instance, some themes may slim down the excerpt output on the front page to make room for other items or visual aesthetics. This can be a problem, because a theme like this can cause a lengthy excerpt to be trimmed, resulting in a confusing or incomplete post preview- which can ultimately cause potential readers to shy away.

Such a problem can be fixed quite simply however, by implementing a character counter.

A character counter is basically a real-time ticker that displays how many characters (letters or symbols) are included in a text entry box. Such a counter is the perfect solution for a problem like trimmed post previews. Writers can be given a specific excerpt or preview length and if the limit is adhered to, the post preview will no longer be cut off in any way.

In this tutorial we are going to specifically implement a character counter in the “Excerpt” entry box of the WordPress dashboard (in the New Post window), but this code can be used to input a character counter into any text entry box within WordPress.

The following segment of code should be implemented in the “Functions.php” source file of the active WordPress theme:

function excerpt_count_js(){
    echo ' <script>jQuery(document).ready(function(){
    jQuery("#postexcerpt .handlediv").after("<div style="position:absolute;top:0px;right:5px;color:#666;"><small>Excerpt length: </small><input type="text" value="0" maxlength="3" size="3" id="excerpt_counter" readonly="" style="background:#fff;"> <small>character(s).</small></div>");
    jQuery("#excerpt").keyup( function() {
add_action( 'admin_head-post.php', 'excerpt_count_js');
add_action( 'admin_head-post-new.php', 'excerpt_count_js');

The counter will display exactly as shown in the image below (top right corner).

Active Character Counter in Excerpt Text Entry Box

That’s all it takes. Once the code above has been injected into the “Functions.php” file the counter will display correctly. Anyone interested in moving the character counter to alternate text entry areas may read on, but a basic understanding of WordPress PHP commands is required.

Implementing the Character Counter In Alternate Text Entry Areas

To implement the character counter into different text entry boxes of the WordPress New Post window a few lines of the code segment must be changed (an advanced understanding of WordPress PHP commands is required).

To change the location of the character counter simply change the following piece of code to reflect the new location desired.

jQuery("#postexcerpt .handlediv")

But the new counter location will simply display the character count for the “Excerpt” text box because we haven’t changed what location the counter should be following. In order to redirect the counter to display a character count for a different text entry box we need to change the “#excerpt” tag to the related location tag.

For instance, if we wanted the character counter to display for the individual post content we would change all the “#excerpt” tags to “#content”.

Of course the counter can be implemented into any WordPress text entry box, including those added by plugins, but the user must KNOW the correct WordPress PHP command related to the location. We would recommend that beginner and novice WordPress programmers do not attempt to move this code to alternate text boxes and instead use the code as it’s intended.

Comments (4)

  • Comment by kberg

    This is a great solution to something I’ve been looking for.
    The only problem is that it breaks some AJAX functions in Pages. It works fine in Posts, however.
    Here’s a screencap to clarify the issue with pages. I hope this helps.

  • Comment by Phoat

    I modified to code to implement Alex’s idea. All you need to do is replace:


    wherever it appears, with:

    jQuery(“#excerpt_counter”).val(200 – jQuery(“#excerpt”).val().length);

    This assumes that your max character count is 200. Change that number to suit your needs.

    Hope I helped!

  • Comment by Alex

    This is absolutely brilliant! Thank you so, so much for this. I’ll definitely implement it.

    What about a count down though? I mean let’s say we knew that the ideal excerpt length would be 200 characters. Could we not therefore set it to countdown from 200. After it would just enter into negative values.

    Let me know if this can be done :)

  • Comment by George Serradinho
    George Serradinho

    It seems simple enough to do. I’m using the Thesis theme and it already has this feature. It helps us all as we can see if we are over the limit or not.

    It nice as one could adapt this code to be used anywhere.

    Thanks for sharing this info :)