Adding a Character Count to WordPress Admin with JQuery

Recently I was asked to add an excerpt count to the admin area of wordpress. Specifically we added a character count to the excerpt field as well as a bunch of custom fields. The goal of the project was to make sure that all the writing team for the site understood that 170 chars MINIMUM was required in the excerpt field as well as the custom field.s

The code to execute this project was quite simple to do. In the theme functions.php file I created a new function called excerpt_count that uses Jquery to count the characters in the excerpt field and update it on each keystroke change.

First step is we need to declare a document.ready function so that once the ‘Add Post’ in the wordpress admin is done loading it will fire our Jquery Function. So in our functions.php file in our current THEME folder we do it Like so;

function excerpt_count()
{
      echo '<script>jQuery(document).ready(function()
      {
	
      });
	</script>';
}

So now that we are telling the admin that we want to load a jQuery function once the page has loaded and is ready we need to tell it what to do. in this case we want to insert into the page a new field that auto updates as writers add content to the ‘excerpt’ field. That code looks like so;

function excerpt_count()
{
      echo '<script>jQuery(document).ready(function()
      {
       jQuery("#postexcerpt .handlediv").after("<div style=\"position:absolute;top:14px;right:50px;color:#FC0707;\">All excerpts must be 150 Chars Minimum. <strong style=\"color:#000\">( <name id=\"excount\">0</name> chars. )</strong></div>");
     		
	</script>';
}

The above code now waits for the page to load, tells the page to run our JQuery code that inserts into the page a note on the Excerpt length that looks like the photo below.

wordpress auto updating excerpt count

The next step is we need to make the number update. That is done by watching for keystroke changes and updating the excerpt length accordingly. We obviously only want to watch the excerpt field for changes not the entire page or as people type the article it would also change the number. So now we add a simple function that as the user types every time they lift their finger off a key it counts the value or length of the excerpt field and updates our new div ‘excount’.

function excerpt_count()
{
      echo '<script>jQuery(document).ready(function()
      {
			jQuery("#postexcerpt .handlediv").after("<div style=\"position:absolute;top:14px;right:50px;color:#FC0707;\">All excerpts must be 150 Chars Minimum. <strong style=\"color:#000\">( <name id=\"excount\">0</name> chars. )</strong></div>");
     		jQuery("#excerpt").keyup( function() 
     		{
     			jQuery("#excount").html(jQuery("#excerpt").val().length);
   	  		});
	  });
	</script>';
}

The final and most important step is to now tell WordPress where to call this function. In my case I am only using this on the Add New Post page. So we add one last line that tells it where to load the function. You could obviously put this also on the main posts list page, the edit page, wherever you want to edit excerpts. ( Something I will likely do ).

The final working code that goes into your themes functions.php file will look like so;

function excerpt_count()
{
      echo '<script>jQuery(document).ready(function()
      {
			jQuery("#postexcerpt .handlediv").after("<div style=\"position:absolute;top:14px;right:50px;color:#FC0707;\">All excerpts must be 150 Chars Minimum. <strong style=\"color:#000\">( <name id=\"excount\">0</name> chars. )</strong></div>");
     		jQuery("#excerpt").keyup( function() 
     		{
     			jQuery("#excount").html(jQuery("#excerpt").val().length);
   	  		});
	  });
	</script>';
}

add_action( 'admin_head-post.php', 'excerpt_count');
add_action( 'admin_head-post-new.php', 'excerpt_count');

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s