1

We try applying an altered version of this (very popular) code in a custom-functions plugin. It was even mentioned at stackoverflow but the whole question was deleted since the user asking was removed. Here is a Google cached version. Closely modified code is still present.

This is the altered code:

// Add Character Counter to the Excerpt Meta Box
function excerpt_count_js(){
  if ('page' != get_post_type()) {

      echo '<script>jQuery(document).ready(function(){
jQuery("#postexcerpt .handlediv").after("<div style=\"position:absolute;top:5px;right:80px;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). (128 Characters MAX)</small></div>");
     jQuery("#excerpt_counter").val(jQuery("#excerpt").val().length);
     jQuery("#excerpt").keyup( function() {
     jQuery("#excerpt_counter").val(jQuery("#excerpt").val().length);
     if ( jQuery("#excerpt_counter").val() >= 129 ) {
        jQuery("#excerpt_counter").css("color","red");
     } else {
        jQuery("#excerpt_counter").css("color","green");
     }
   });
});</script>';
}
}
add_action( 'admin_head-post.php', 'excerpt_count_js');
add_action( 'admin_head-post-new.php', 'excerpt_count_js');

It works well on the excerpt meta box, producing expected results.

But it causes multiple issues on the Edit Media screen. Although it is coded to load only if ('page' != get_post_type()) and on admin_head-post.php or admin_head-post-new.php.
These issues are:

  • the Help and Screen Options buttons become un-clickable.
  • the Hover Effect does not work on the admin sidebar
  • the Description buttons (like b+i+img etc.) just disappear.

We have tried the original as well as other modified versions of the script with no luck.

Similar questions have been asked here and here seemingly using the same jQuery coding. Still, no one has reported any issues. Is it just us?

EDIT:

Since you asked, the errors are:

Uncaught TypeError: Cannot read property 'length' of undefined
Uncaught TypeError: Cannot read property 'hasClass' of undefined

  • Usually this is caused by a javascript error, are there any in your browser's console? – socki03 Nov 23 '16 at 15:41
  • @socki03 Yes there are. I will update the question and place them in it. – marikamitsos Nov 23 '16 at 15:44
  • @socki03 Make a note that the script is tested on a standard Wordpress v4.6.1 clean installation, with no other plugins activated using the Twenty-Fifteen theme. – marikamitsos Nov 23 '16 at 15:57
3

Ok, so I didn't like the way that was written, so i slightly rewrote it with different syntax, and more readable structure.

<?php 
// Add Character Counter to the Excerpt Meta Box
function excerpt_count_js(){
    if ('page' != get_post_type()) { ?>
        <script>

        (function($){

            $(document).ready(function(){

                if ( $('#postexcerpt').length ) {

                    var maxChar = 128;

                    $excerpt = $('#excerpt');

                    $("#postexcerpt .handlediv").after( '<div style="position:absolute;top:5px;right:80px;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). (' + maxChar + ' Characters MAX)</small>' +
                                                        '</div>'
                                                    );

                    $excerptCounter = $("#excerpt_counter");

                    $excerptCounter.val( $excerpt.val().length );

                    $excerpt.keyup( function() {

                        $excerptCounter.val( $excerpt.val().length );

                        var exColor = ( ( $excerptCounter.val() > maxChar ) ? 'red' : 'green' );

                        $excerptCounter.css( 'color', exColor );

                    });

                }

            });

         })(jQuery);

        </script>
    <?php }
}
add_action( 'admin_head-post.php', 'excerpt_count_js');
add_action( 'admin_head-post-new.php', 'excerpt_count_js');
?>

It didn't have a check for whether or not #postexcerpt was even on the page, so I added that, and attempted to clean it up and make it easier to understand and change. I'm not a fan of the inline styling, but oh well.

Anyway, I tested this on a clean 4.6.1 install with 2016 installed, and it worked just fine. Let me know if this doesn't work for you.

  • It works just fine. :) Thank you so much. FYI #postexcerpt was in the script. But anyway. Just give us some time to test it a bit more before the final verdict (I cannot stop wondering why hasn't anyone else noticed that). – marikamitsos Nov 23 '16 at 16:31
  • Confirmed. No issues whatsoever. Please (since this is a popular script) consider upvoting the question as well. It draws more attention and helps others as well. – marikamitsos Nov 23 '16 at 16:43
  • I was referencing the fact that #postexcerpt wasn't being checked so if, for one reason or another, such as it being a Custom Post Type, or if you've disabled Excerpts on posts, the script would fail because it couldn't find a length on a value of something that doesn't exist. – socki03 Nov 23 '16 at 16:49
  • I see. No. None of the above. No Custom Post Types nor disabled Excerpts. I guess it will have no issues though. Having said that. Is there a way to make sure it works fine even in those cases? If so, please consider updating your answer. – marikamitsos Nov 23 '16 at 16:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.