Wordpress Admin Customization Without Core File Modification

Question

I am adding a word count display to the title field, similar to the body field when editing a post (don't ask me why, it's a client request). I've got it working

• By displaying the count by hooking in to the "edit_form_after_title"
• Editing word-count.min.js and duplicating the code there for my new counter element
• Editing post.min.js and duplicating the trigger handler for changing the value of the word count (search for // word count in post.js near line 960)

So now that I've got it working, my question is how do I get the new javascript code to live outside of these files so they aren't wiped out on an upgrade? I've created a custom .js file and enqueued it in my functions file, but I'm unable to get it working the same way. The file does get loaded in, but things just aren't working the correctly if the new javascript I write is not in the original files. It's probably just my limited knowledge of javascript, but I would like to get this working separated from the wordpress javascript files.

Here's the working post.js word count javascript (original function first, my copied function is second) which handles recounting the words on the keystrokes. Note: I've also set the "ti" variable higher up in the code where "co" is set to be the title field.

// Original 'body' word count

    if ( typeof(wpWordCount) != 'undefined' ) {
        $document.triggerHandler('wpcountwords', [ co.val() ]);

        co.keyup( function(e) {
            var k = e.keyCode || e.charCode;

            if ( k == last )
                return true;

            if ( 13 == k || 8 == last || 46 == last )
                $document.triggerHandler('wpcountwords', [ co.val() ]);

            last = k;
            return true;
        });
    }


// Word count for Title
if ( typeof(wpWordCount_title) != 'undefined' ) {
    $document.triggerHandler('wpWordCount_title', [ ti.val() ]);

    ti.keyup( function(e) {
        $document.triggerHandler('wpWordCount_title', [ ti.val() ]);
        var k = e.keyCode || e.charCode;

        if ( k == last )
            return true;

        if ( 13 == k || 8 == last || 46 == last )
            $document.triggerHandler('wpWordCount_title', [ ti.val() ]);

        last = k;
        return true;
    });
}

And here's my duplicated/tweaked function for word-count.js which handles actually counting the words.

var wpWordCount_title;
! function (a, b) {
    wpWordCount_title = {
        settings: {
            strip: /<[a-zA-Z\/][^<>]*>/g,
            clean: /[0-9.(),;:!?%#$¿'"_+=\\/-]+/g,
            w: /\S\s+/g,
            c: /\S/g
        },
        block: 0,
        wc: function (c, d) {
            var e = this,
                f = a(".title-word-count"),
                g = 0;
            d === b && (d = wordCountL10n.type), "w" !== d && "c" !== d && (d = "w"), e.block || (e.block = 1, setTimeout(function () {
                c && (c = c.replace(e.settings.strip, " ").replace(/ | /gi, " "), c = c.replace(e.settings.clean, ""), c.replace(e.settings[d], function () {
                    g++
                })), f.html(g.toString()), setTimeout(function () {
                    e.block = 0
                }, 2e3)
            }, 1))
        }
    }, a(document).bind("wpWordCount_title", function (a, b) {
        wpWordCount_title.wc(b)
    })
}(jQuery);

Answer 1

I would suggest writing a plugin that modifies the admin interface as oppose to modifying the WordPress core, including it in a theme, or using a third party plugin. In your plugin use the admin_enqueue_scripts add_action, as shown below to load your scripts while in the admin.

function load_custom_wp_admin_script() {
    wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'myscript.js' );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_script' );

You should check this page in the WordPress Codex.