Home / admin / Add a character counter to excerpt metabox
  • How to Add a character counter to excerpt metabox

    add-a-character-counter-to-excerpt-metabox

    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.

    ( click code to copy )

    wordpress snippet : PHP

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

    ( WordPress codex functions, hooks, in this snippet. )

    query, admin_head, add_action,
  • 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.

    • 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.

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

  • 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)

  • 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.

    • @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.

  • 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!

    • 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….

      • 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! :)

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

      • 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!

  • 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?

    • 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/ ?

    • 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.

    • 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.

    • 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

        • 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…)

  • was very helpful,¬†really¬†thank you.

  • 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);        });    });   

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

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

    • 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

    • 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.

    • 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!

  • 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.

  • 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.

  • fara

    By placing code in “if (‘page’ != get_post_type()) ” condition the pages of wordpress work perfectly. May be it could help anybody.

    function excerpt_count_js(){

    if (‘page’ != get_post_type()) {

    echo ‘jQuery(document).ready(function(){
    jQuery(“#postexcerpt .handlediv”).after(“Excerpt length: / 500character(s).”);
    jQuery(“span#excerpt_counter”).text(jQuery(“#excerpt”).val().length);
    jQuery(“#excerpt”).keyup( function() {
    if(jQuery(this).val().length > 500){
    jQuery(this).val(jQuery(this).val().substr(0, 500));
    }

    jQuery(“span#excerpt_counter”).text(jQuery(“#excerpt”).val().length);

    });
    });’;
    }
    }
    add_action( ‘admin_head-post.php’, ‘excerpt_count_js’);
    add_action( ‘admin_head-post-new.php’, ‘excerpt_count_js’);

  • ellm

    Works Great!

  • Pingback: Customizing the WordPress Admin : WPNYC Meetup Recap : Chrisdigital's Blog : Chris Carvey : NYC()