wordpress snippets last updated   : August 18, 2014
we now have 638 snippets

Add a character counter to excerpt metabox

wordpress snippet

Adding this snippet to the functions.php of your wordpress theme will add a character counter to excerpt metabox. Update: Made a small update to a more appropriate hook, thanks Andrew.

snippet :  PHPcopy
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_counter").val(jQuery("#excerpt").val().length);
     jQuery("#excerpt").keyup( function() {
     jQuery("#excerpt_counter").val(jQuery("#excerpt").val().length);
   });
});</script>';
}
add_action( 'admin_head-post.php', 'excerpt_count_js');
add_action( 'admin_head-post-new.php', 'excerpt_count_js');
source →

Did you like this post? If so please share it with your friends. Thanks!

  • Andrew Biss

    The excerpt metabox only appears on the new post and edit post Admin pages, so the snippet can be limited to these by using the hooks ‘admin_head-post.php’ and ‘admin_head-post-new.php’ rather than ‘admin_head’, which adds the snippet to every Admin page.

    • http://wpsnipp.com Kevin Chard

      Good point Andrew, it is a waste to load it on every admin page. Ill make an update to the snippet, thanks for pointing that out.

  • Myst1010

    (Translated by program)
    This tip is really fantastic!, I think it may even encourage users to use this feature of the system that is always overlooked but very useful.

    • http://wpsnipp.com Kevin Chard

      It also helps because by default I think it is a 55 char limit for the excerpt.

  • http://www.turnkeyinvestmentproperties.com.au Karl Thew

    Exactly what I was looking for. Thanks very much. If I could limit how many characters were allowed in the box (to preserve the right look for the excerpt) that would also be great. However in the meantime I have simply written next to the character counter. (DO NOT exceed 320 characters)

    • http://wpsnipp.com Kevin Chard

      By default the excerpt is truncated at 55 characters so it should never reach that length. However you could use this snippet and define the number of characters for the excerpt.

      http://wpsnipp.com/index.php/excerpt/custom-excerpt-length/

      Keep in mind this will not stop them from typing more text into the excerpt field.

  • Jani Uusitalo

    Brilliant! Usually googling for WP stuff gets me a bunch of plugins that do what I need and then try to be a kitchen sink also, but this snipped scratched an itch with surgical precision. Thank you! Too bad there isn’t a flattr link here, this would have definitely been worth flattring.

    • http://wpsnipp.com Kevin Chard

      @google-de31253397522fac9cf8619290aa2a8f:disqus  glad you like the snippet! In regards to flatter I have not added one yet, but I add new snippets to wpsnipp.com everyday so I’m sure ill have it soon enough.

  • http://www.wisekal.ca Bryce Wisekal

    I’d love the see the ability to include this in the actual editor itself rather than for excerpts. I’ve been searching all day for something that counts the characters inside the editor, not excerpt. This is just brilliant though. Now to hack it apart and see if I can get it to work inside the editor instead.

    Thanks so much for this fantastic contribution!

    • http://wpsnipp.com Kevin Chard

      Cool glad that you like the snippet! Should be fairly easy to set things up, you can change #excerpt to #content and that will already display the count but will still display the counter within the excerpt title area. The on line 03 just change “#postexcerpt .handlediv” to target the new location you want the counter to display and you are ready to go….

      • http://www.wisekal.ca Bryce Wisekal

        Your my new best friend :) Thanks so much! I actually already did that just having a difficult time getting it placed where I want it but I’ll figure it out ;) Your awesome man. Thanks for this fantastic contribution! :)

        • http://wpsnipp.com Kevin Chard

          Thanks, not a problem enjoy the site and don’t forget to follow us on facebook or twitter I post daily.

      • http://www.wisekal.ca Bryce Wisekal

        Once more, thank you. A little editing and have it nicely placed where its needed. Thanks!

        I have followed you on both Facebook and Twitter. Look forward to reading your tweets! It’s days like this I really appreciate people who blog their discoveries. Thanks once more for sharing this snippet!

        • http://wpsnipp.com Kevin Chard

          Sweet, enjoy the snippets.

  • http://twitter.com/EricRasch Eric Rasch

    I’ve had this snippet (great feature, BTW) on my site for a few days and just discovered it (the jQuery) was conflicting with the jQuery running on the Pages section of the admin. No menus or any AJAX’y stuff was working and it only affected just the Pages (no Posts or Custom Post Types).

    Anyone else run into that issue?

    • http://wpsnipp.com Kevin Chard

      Hi Eric,
      Ill take a look and see if I get the same results,

  • Anthony

    Thx for this great function. But can you help me to add character counters to text meta boxes of this wordpress plugin (More Fields): http://wordpress.org/extend/plugins/more-fields/ ?

    • http://wpsnipp.com Kevin Chard

      Hi Anthony, you just need to change each instance of ‘#excerpt’ to the ID of whatever the field is you want to have the TinyMCE editor displayed. 

  • Marxo

    Is there any solution for the problem with pages? Can’t use screen options and help buttons anymore under pages.

    • http://wpsnipp.com Kevin Chard

      Hi Marxo, I just tested things on Firefox with wordpress 3.2.1 and no issues with the help menu or other admin menus functioning. I use jQuery(document).ready(); so as to not cause any conflicts. You could give this method a try and see if this works for you,

       http://advantcomp.com/jquery-conflicts-and-wordpress-how-to-include-your-own-jquery-scripts-the-correct-way/

      Although it could be another plugin you having running so I would temporarily disable them to test things out.

      • Marxo

        Thanks for your time. )

        Tried updated code. Everything is ok if you choose Pages > Screen Options / Help. Problems start  if you choose Pages > Sample Page > Screen Options / Help.

        Fresh WordPress 3.2.1 installation
        No plugins
        Twenty Eleven theme

  • TL

    Thanks for the snippet! Works great on posts but on pages I experience the same issues as Eric and B.J. – any idea what could cause this?

    Cheers,Thomas.

    • http://wpsnipp.com Kevin Chard

      Hi TL just tested things out and I have no issues with wordpress 3.3 and get no errors, do you think it could be another plugin you have running ? what I would do is disable all plugins you have running see if you still have problems if not then turn each one on checking to see what plugin is the cause.

      • TL

        Hey Kevin,

        I tried it with all plugins deactivated but no change…

        It’s not that bad because I mainly use posts not pages but still. If you find or hear something please let me know!

        Thanks 
        TL

        • http://wpsnipp.com Kevin Chard

          are you running on the most recent version of wordpress?

        • TL

          yes, I tested it with 3.3 and the new 3.3.1 version…!

          (I somehow cannot reply to your post just to mine…)

  • http://www.cikletoyun.com/oyunlar/balon-oyunlari balon patlatma

    was very helpful, really thank you.

    • http://wpsnipp.com Kevin Chard

      No problem enjoy the snippet.

  • Anonymous

    Should be a default part of WordPress. Thank you… I modified it a bit to suit my needs by replacing the Excerpt instructions with the Char Count. Who needs that silly noob stuff anyway…


    function tpl_excerpt_count(){ ?>        jQuery(document).ready(function(){        var label = 'Character Count: ';        jQuery('#postexcerpt p').html(label + jQuery('#excerpt').val().length);        jQuery('#excerpt').keyup(function(){            jQuery('#postexcerpt p').html(label + jQuery('#excerpt').val().length);        });    });   

    • http://wpsnipp.com Kevin Chard

      Ahhh very cool not a bad idea at all, glad that I could help out!

  • http://cudjex.com/ cudjex

    add_action( ‘COMMENT?, ‘excerpt_count_js’);
    Can we add comments?

    • http://wpsnipp.com Kevin Chard

      you can assign this to any item that know the ID rather then the excerpt field.

  • Pingback: Daily Tip: How to Add a Character Counter to the WordPress Excerpt Box | The WordPress Experts - WPMU.org

  • Kyle

    I’m experiencing the same issue with AJAX not working with pages. Has anyone found a solution?

  • Kyle

    I wanted to share a screencap to clarify the issue with pages. I hope this helps. https://www.dropbox.com/s/xhkv718cjcj5ep9/excerpt-counter.jpg

    • http://wpsnipp.com Kevin Chard

      very strange ill look into this, sorry took so long disqus stopped emailing me new comments.

  • Mark

    Thanks for the snippet. Regarding the pages issue: the script throws a javascript error when editing a page of: “TypeError: Cannot read property ‘length’ of undefined”, on this line: jQuery(“#excerpt_counter”).val(jQuery(“#excerpt”).val().length);. As I presume on a page an excerpt is not used but the hook is still called and the script is embedded in the header, so there is nowhere called ‘#postexcerpt .handlediv’ for the query to insert after and then no length value to evaluate. But you can put an if statement round the last 3 lines of the jQuery, something like: “if (jQuery(“#excerpt_counter”).length > 0){ // last 3 lines of code here }” which may fix it.

    • https://www.celticstalk.com/ Josh Warren

      This solution solved all the js issues I was having. The screen options was annoying, but a far larger problem was image scaling returning NaN and rendered unusable. All easily solved by adding the if statement, thanks a lot!

  • http://archi.tect.gr/ Heracles Papatheodorou

    Thank you for this one!
    Made some modifications to strip HTML and make twiter ready excerpts:


    function excerpt_count() {
    echo 'jQuery(document).ready(function($){
    $("#excerpt").after('');
    function excerpt_count() {
    var count = $("#excerpt").val();
    $("#excerpt_counter").text($(""+count+"").text().length);
    }
    excerpt_count();
    $("#excerpt").keyup( function() { excerpt_count(); }); });
    ';
    }

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

    Hopefully it proves useful to someone.

  • http://www.paoloalbera.com/ Paolo Albera

    Thanks so much for this one!
    Fyi, the snippet works fine even in woocommerce product page excerpt.

  • TechInsideCom

    Thanks for this great solution. Is it posible do the same thing for title box? Thanks.

    • http://wpsnipp.com Kevin Chard

      You can take a look at this snippet, I made a few css changes fixed things a bit.
      http://pastebin.com/gsFF8pc7

jqsnipp.com | we just launched jquery snippets website