Create TinyMCE buttons in WordPress

To create MCE buttons to your WordPress tiny editor, just follow below 2 steps.

Step-1: Add following code to your function.php file. This file found at /wp-content/themes/YOUR_THEME/function.php.

/*		CREATE TINY EDITOR BUTTONS					*/
 
// 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() .'/mg-mce-btns.js';
	return $plugin_array;
}

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

Step-2: Create file mg-mce-btns.js, Save this file to /wp-content/themes/YOUR_THEME. Note: Save file into same directory where function.php. Copy below code and place it into mg-mce-btns.js file.

(function() {
	tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
		editor.addButton( 'my_mce_button', {
			text: 'JQuery',
			icon: false,
			type: 'menubutton',
			menu: [
				{
					text: 'Item 1',
					menu: [
						{
							text: 'Sub Item 1',
							onclick: function() {
								editor.insertContent('This is Sub Item-1');
							}
						},
						{
							text: 'Sub Item 2',
							onclick: function() {
								editor.insertContent('This is Sub Item-2');
							}
						}
					]
				},
				{
					text: 'Item 2',
					menu: [
						{
							text: 'Sub Item 1',
							onclick: function() {
								editor.insertContent('This is Munu-2 - Sub Item-1');
							}
						},
						{
							text: 'Sub Item 2',
							onclick: function() {
								editor.insertContent('This is Munu-2 - Sub Item-2');
							}
						}
					]
				}
			]
		});
	});
})();

Result:

Download complete source code: Source files