Adding button to Wordpress TinyMCE Editor via Theme Files

functions.php

<?php
// functions.php

// ...

// add new buttons
add_filter( 'mce_buttons', 'myplugin_register_buttons' );

function myplugin_register_buttons( $buttons ) {
	array_push( $buttons, '|', 'custom_class');

	return $buttons;
}
 
// Load the TinyMCE plugin : editor_plugin.js (wp2.5)
add_filter( 'mce_external_plugins', 'myplugin_register_tinymce_javascript' );

function myplugin_register_tinymce_javascript( $plugin_array ) {

   $plugin_array['myplugin'] = get_stylesheet_directory_uri() . '/tinymce-plugin.js';

   return $plugin_array;
}

// ...

?>

tinymce-plugin.js

// tinymce-plugin.js

(function() {
    tinymce.PluginManager.add( 'myplugin', function( editor, url ) {
        // Add Button to Visual Editor Toolbar
        editor.addButton('custom_class', {
            title: 'Insert CSS Class',
            cmd: 'custom_class',
            image: url + '/icon.png',
        });

        // Add Command when Button Clicked
        editor.addCommand('custom_class', function() {
            alert('Button clicked!');
        });
    });
})();