New WordPress Excerpt Character Counter

Excerpt Character Counter screenshot

An Excerpt Character Counter makes a very good addition to your WordPress admin.

I rely on excerpts to form the meta description for my pages. Read more about the importance of meta description. For use with meta description, excerpt length must be limited to 156 characters maximum.

I have used a well known character counter for many years. It works well for posts, but I now use excerpts on all pages, and that includes media attachment pages. Therefore, I’ve improved the original excerpt character counter to work on media pages also.

Original Excerpt Character Counter

There has been a WordPress Excerpt Character Counter around the Internet for a few years. I think I’ve correctly traced the original character counter to Elio Rivero at I Love Colors, but it has been improved and widely promoted by Kevin Chard at WPsnipp. Many other people have spread it around, and it looks like this (with my numbering to aid the explanation:

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');

Excerpt Character Counter Explained

  1. Adds a counter box after the excerpt container, positioned to the top right.
  2. Initialize the counter box with the current excerpt length.
  3. Change the counter when a key is released whilst typing in the excerpt box.
  4. Add the function for Page/Post edit screens and when new ones are added.

On my sites, I started dropping the second Add_action for new posts. There is nothing intrinsically wrong with it, but I like to save my draft at least once before I write the excerpt. I do this because I like to see the excerpt writing as a separate procedure. I write the excerpt as the final part of content writing before I publish the page. I touched on this in Keep Your Content Real, and I will expand on it when I write about the crucial importance of excerpts.

Shrewdies WordPress Excerpt Character Counter

Excerpt Character Counter screenshotMy first challenge was to cope with the idiosyncrasies of the media editing form. For media, the excerpt is called the attachment_caption. Therefore, I test for that first in the code below.

I then changed some of the output styling to get a character count that is readable on posts, pages, and media.

function shrewdies_excerpt_count_js(){
	echo '<script>var ShrewdiesExcerpt;jQuery(document).ready(function(){
			ShrewdiesExcerpt.before("<div style="float:right;color:#666;height:29px;margin-top:-29px;font-size:80%;">Excerpt length: <input type="text" value="0" maxlength="3" size="3" id="shrewdies_excerpt_counter" readonly="" style="background:#fff;"> character(s).</div>");
			jQuery(ShrewdiesExcerpt).keyup( function() {
add_action( 'admin_head-post.php', 'shrewdies_excerpt_count_js');

That character counter works OK on most of my websites. I can see that I might need to tweak it again for other Custom Post Types. If it doesn’t work for Custom Types that you need, please let me know, and I will try to add them.

I add the code to the Functionality plugin. I believe this is a better alternative to changing functions.php for functions that are not theme-related. Functionality is easy to use, and I will review it in more detail later.

How important is character counting to you?