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.
Thanks for tutorial but excerpt lenght box didn’t appear.
WordPress 3.03 and no plugins.
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.
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.
Not sure what you did but it’s working perfectly now.
Thanks for your reply. 🙂
Working smoothly! thanks!
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 …
Thank’s very much for the tutorial, it helped me alot! THANKS!
[…] 47. Add a Character Counter For The Excerpt In WordPress […]
If anyone want this counter for pages too, just remove this piece of code: if($typenow != ‘page’) and it should work. 🙂
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!
[…] 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; […]
[…] Add a character counter for the excerpt in WordPress – I Love […]
Awesome. Thanks!
[…] Source file […]
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 functionget_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!
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 theget_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()
[…] Source file […]