Why does my visual post editor break when I try to add a TinyMCE button?

Question

I'm trying to add a button to my TinyMCE editor. I'm using WordPress 3.9.1, so I'm following this tutorial to add a new TinyMCE button. Right now, I'm just trying to get the tutorial version working--once that's done, I'll edit the button's script to actually do what I want.

I've added this to my child theme's functions.php file:

// Hooks your functions into the correct filters
function my_add_mce_button() {
    // check user permissions
    if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
        return;
    }
    // check if WYSIWYG is enabled
    if ( 'true' == get_user_option( 'rich_editing' ) ) {
        add_filter( 'mce_external_plugins', 'my_add_tinymce_plugin' );
        add_filter( 'mce_buttons', 'my_register_mce_button' );
    }
}
add_action('admin_head', 'my_add_mce_button');

// Declare script for new button
function my_add_tinymce_plugin( $plugin_array ) {
    $plugin_array['my_mce_button'] = get_template_directory_uri() .'/js/mce-button.js';
    return $plugin_array;
}

// Register new button in the editor
function my_register_mce_button( $buttons ) {
    array_push( $buttons, 'my_mce_button' );
    return $buttons;
}

I've also created a script with the content below, and saved it as "mce-button.js" in the /js directory of my child theme's folder.

(function() {
    tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
        editor.addButton('my_mce_button', {
            text: 'New Button',
            icon: false,
            onclick: function() {
                editor.insertContent('WPExplorer.com is awesome!');
            }
        });
    });
})();

However, when I save all that and load the post editor (in the "Visual" tab), none of the buttons load, and I can't enter text in the editor. In fact, if I go to the "Text" tab and enter text, then switch back to the "Visual" tab, the text I entered doesn't appear.

Could someone please help me figure out why my TinyMCE editor is breaking, and how I can add buttons properly without breaking it?

Thank you!

Answer 1

Well, here's what I found. It doesn't quite explain why the editor was breaking, but it does explain how to add a button properly, without breaking the editor.

The PHP code I was trying to add to functions.php actually needed to be added as a plugin. Combining directions from this StackExchange post and this tutorial, I created a WordPress plugin containing the PHP given in the second link. I also followed the tutorial's directions to create a shortcode.js file, which I uploaded to my custom plugin's folder. I activated the plugin via my Dashboard, and it added a working button!

When I follow the directions I originally found and add the PHP functions as a plugin, not edits to functions.php, it also works.

Looks like using plugins, not functions.php, was what it took to make it work.