Customize WordPress TinyMCE Editor With Custom Buttons

WordPress comes with an awesome rich text editor-TinyMCE. By default, the editor shows only the very necessary items that you may need for writing your posts. In this article, I’ll show you how to customize the TinyMCE editor by creating and hiding any buttons you want.

Add More Buttons to TinyMCE Editor

As I said in the introductory text, the default editor contains only the necessary items. You can add more functionality to it by adding more buttons.

The below code will add a new button in the first row of the editor that will allow you to create horizontal rule in a post.

function add_mce_buttons($buttons){
  array_push($buttons, "hr");
  return $buttons;
}
add_filter("mce_buttons", "add_mce_buttons");

Add the code to your theme’s functions.php file. More buttons can be found here.

The button can also be added to the 2nd or 3rd row in like this:

add_filter("mce_buttons_2", "add_mce_buttons");
add_filter("mce_buttons_3", "add_mce_buttons");

Create Custom Buttons in TinyMCE Editor

If you use shortcodes or classes for text and images, buttons for that can also be created.

Here I am going to create a button in the third row that will wrap selected text with a “CSS” shortcode. You can see an example of it in the image above.

Add below code to your functions.php file:

add_action('init', 'custom_mce_button');
function custom_mce_button() {
   if ( current_user_can('edit_posts') &&  current_user_can('edit_pages') )
   {
     add_filter('mce_buttons_3', 'add_button');
     add_filter('mce_external_plugins', 'add_plugin');
   }
}

The above snippet of code will run the function called custom_mce_button when the page is initially loaded. It will then check whether the user has the necessary authorization to edit a page or a post before proceeding, and then it will load the button and it’s functionality.

This function creates the “CSS” button for our shortcode.

function add_button($buttons) {
	array_push($buttons, "blcss");
	return $buttons;
}

And this will tell TinyMCE and WordPress how to handle the button.

function add_plugin($plugin_array) {
   $plugin_array['blist'] = get_bloginfo('template_url').'/scripts/customcodes.js';
   return $plugin_array;
}

The above code simply maps the shortcode to a specific JavaScript file, customcode.js, that is saved in a “scripts” directory, inside your theme’s folder. You can hard code the path, but using get_bloginfo method makes it a bit simple.

Complete the task by adding the following code to a file called customcodes.js. Save it in the above defined path.

(function(){
    tinymce.PluginManager.requireLangPack('blist');
    tinymce.create('tinymce.plugins.blist', {
        init : function(ed, url){
			ed.addCommand('cmd_css', function(){
                ilc_sel_content = tinyMCE.activeEditor.selection.getContent();
                tinyMCE.activeEditor.selection.setContent('[css]' + ilc_sel_content + '[/css]');
            });
            ed.addButton('blcss', {
                title: 'CSS Wrap',
                image: 'http://PATH-TO-YOUR/css.png',
                cmd: 'cmd_css'
            });
        },
        createControl : function(n, cm){
            return null;
        },
    });
    tinymce.PluginManager.add('blist', tinymce.plugins.blist);
})();

The “CSS.png” should be 20px X 20px image.

Hide Unwanted Buttons and Options from TinyMCE Editor

If you wish to remove any unwanted buttons from the editor, then just specify it in the below code:

function disable_mce_buttons( $opt ) {
	$opt['theme_advanced_disable'] = 'bold,italic';
	return $opt;
}
add_filter('tiny_mce_before_init', 'disable_mce_buttons');

You can also set values, and show only those elements which you want:

function custom_options( $opt ) {
	//format drop down list
	$opt['theme_advanced_blockformats'] = 'p,pre,code,h3,h4';
	//font list
	$opt['theme_advanced_fonts'] = 'Arial=arial,helvetica,sans-serif;Courier New=courier new,courier,monospace';
	//font size
	$opt['theme_advanced_font_sizes'] = '10px,12px,14px,16px,24px';
	//default foreground color
	$opt['theme_advanced_default_foreground_color'] = '#000000';
	//default background color
	$opt['theme_advanced_default_background_color'] = '#FFFFFF';
	return $opt;
}
add_filter('tiny_mce_before_init', 'custom_options);