Allground - Responsive Fullscreen Backgrounds for WordPress with images, YouTube videos, Google Maps and self hosted videos

Add a character counter for the excerpt in WordPress

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.


“Add a character counter for the excerpt in WordPress” received 16 comments! Add yours.

  1. Tarmo December 11th, 2010

    Thanks for tutorial but excerpt lenght box didn’t appear.

    WordPress 3.03 and no plugins.

  2. Elio December 11th, 2010

    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.

  3. Elio December 11th, 2010

    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.

  4. Tarmo December 12th, 2010

    Not sure what you did but it’s working perfectly now.

    Thanks for your reply. :)

  5. David December 13th, 2010

    Working smoothly! thanks!

  6. wpmag.com - WordPress News, Themes, Tutorials, Plugins, Questions, ... December 15th, 2010

    Add a character counter for the excerpt in WordPress | WordPress | ilovecolors…

    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 …

  7. Jefferson January 6th, 2011

    Thank’s very much for the tutorial, it helped me alot! THANKS!

  8. 60 Excellent Web Development Tutorials April 2nd, 2011

    [...] 47. Add a Character Counter For The Excerpt In WordPress [...]

  9. Bruno Monteiro August 3rd, 2011

    If anyone want this counter for pages too, just remove this piece of code: if($typenow != ‘page’) and it should work. :-)

  10. Karl September 30th, 2011

    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!

  11. 10 Excellent Web Development Tutorials | jQuery4u October 26th, 2011

    [...] typed in. In this tutorial we will learn how to easily add a character counter for the excerpt. Source #dd_ajax_float{ background:none repeat scroll 0 0 #FFFFFF; border:1px solid #DDDDDD; float:left; [...]

  12. Anzahl der Zeichen im Excerpt anzeigen – für perfekte Google Descriptions | kulturbanause blog May 18th, 2012

    [...] Add a character counter for the excerpt in WordPress – I Love [...]

  13. Steffen October 16th, 2012

    Awesome. Thanks!

  14. How to add character counter to excerpt metabox - Devtoolsplus : Devtoolsplus May 8th, 2013

    [...] Source file [...]

  15. Ricky Buchanan March 19th, 2014

    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!

  16. Elio April 21st, 2014

    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 comment