New to the community? Start here

Twitter-like word counter

0

Hi all, for my micro-blogging site I am using the P2 theme, and I wish to add a small word counter next to the text input area that will let the users know how many words they have typed so far. I have been looking inline for these kinds of scripts and found this:

http://www.wprecipes.com/laura-asked-how-to-get-words-count-of-your-post

However, that only displays the word count after the post was published.

Any ideas?

Wed, 18 Nov 2009 14:39:57
  • iamzaks
    • Flash Drive

    great idea:

    This is what you do

    1- Create a new .js file named “word-counter.js” with the following code:

    // JavaScript Document</p>
    
<p>$(document).ready(function() {<br />
    
$("[class^='count[']").each(function() {<br />
    
var elClass = $(this).attr('class');<br />
    
var minWords = 15;<br />
    
var maxWords = 100;<br />
    
var countControl = elClass.substring((elClass.indexOf('['))+1, elClass.lastIndexOf(']')).split(',');</p>
    
<p>		if(countControl.length > 1) {<br />
    
minWords = countControl[0];<br />
    
maxWords = countControl[1];<br />
    
} else {<br />
    
maxWords = countControl[0];<br />
    
}	</p>
    
<p>		$(this).after('<div class="wordCount"><strong>0</strong> Palabras</div>');<br />
    
if(minWords > 0) {<br />
    
$(this).siblings('.wordCount').addClass('error');<br />
    
}	</p>
    
<p>		$(this).bind('keyup click blur focus change paste', function() {<br />
    
var numWords = jQuery.trim($(this).val()).split(' ').length;<br />
    
if($(this).val() === '') {<br />
    
numWords = 0;<br />
    
}<br />
    
$(this).siblings('.wordCount').children('strong').text(numWords);</p>
    
<p>			if(numWords < minWords || (numWords > maxWords && maxWords != 0)) {<br />
    
$(this).siblings('.wordCount').addClass('error');<br />
    
} else {<br />
    
$(this).siblings('.wordCount').removeClass('error');<br />
    
}<br />
    
});<br />
    
});<br />
    
});

    Save the file, and upload it to your theme directory, I suggest you create a new folder called “scripts” for better organization.

    2- We need to add the javascript to our header, so open up header.php and add:

    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

    3- Then, right after that line of code, call the file you created in Step 1 (if you did not create the “scripts” folder, just delete it from the address):

    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/word-counter.js"></script>

    4- That’s all the changes to your header file, now save it and upload.

    5- You will need to make one final change to your theme, so open up your “post-form.php” file.

    Look for: <textarea name="posttext" id="posttext" tabindex="1" rows="3" cols="60"></textarea>

    This is the main text field, now add

    class="count[50]"

    So it should look like this:

    <textarea name="posttext" id="posttext" class="count[50]" tabindex="1" rows="3" cols="60"></textarea>

    6- Save and Upload.

    That’s it, you are done, you now have a word counter right below your post box!