How to create a TinyMCE button plugin for WordPress

One of the best things in WordPress is the awesome rich text editor included, TinyMCE, by Moxiecode. It’s easy to use, organized and if you need to, you can reveal or even add more buttons to extend its functionality. For instance, to wrap a text selection with a shortcode or add a particular class to an image, to mention rather usual tasks. In this post we will build a plugin to wrap your selected text with a shortcode.

Our plugin will work next to SyntaxHighlighter Evolved, a nice plugin by Viper007Bond & Automattic that recognizes the syntax of your code highlighting it accordingly.  It’s the one I use in I Love Colors site to display code. The plugin will buttons for php, js, css or html shortcodes in Syntax Highlighter Evolved.Before we start, create the icons for your buttons and place them in the same plugin directory at the same level than the main plugin php file. It will be easier when we call them later.

The plugin class

Like with any other WordPress plugin, we need our main PHP file. We’re going to create a properly prefixed class.

[php]
class ILC_Syntax_Buttons {
function ILC_Syntax_Buttons(){
if(is_admin()){
if ( current_user_can(‘edit_posts’) && current_user_can(‘edit_pages’) && get_user_option(‘rich_editing’) == ‘true’)
{
add_filter(‘tiny_mce_version’, array(&$this, ‘tiny_mce_version’) );
add_filter("mce_external_plugins", array(&$this, "mce_external_plugins"));
add_filter(‘mce_buttons_2’, array(&$this, ‘mce_buttons’));
}
}
}
function mce_buttons($buttons) {
array_push($buttons, "separator", "ilcPHP", "ilcCSS", "ilcHTML", "ilcJS" );
return $buttons;
}
function mce_external_plugins($plugin_array) {
$plugin_array[‘ilcsyntax’] = plugins_url(‘/ilc-syntax-buttons/ilcsyntax.js’);
return $plugin_array;
}
function tiny_mce_version($version) {
return ++$version;
}
}

add_action(‘init’, ‘ILC_Syntax_Buttons’);
function ILC_Syntax_Buttons(){
global $ILC_Syntax_Buttons;
$ILC_Syntax_Buttons = new ILC_Syntax_Buttons();
}
[/php]

The first function within the class is the first one called when the class is initialized. We check if we’re on the WordPress admin with is_admin(), otherwise we don’t need to go any further. If we do are in the admin, we will check if the user has the privileges to edit posts and pages and if the user wants to use the rich text editor. Finally, if all this is true, we start filtering the toolbar to add our buttons.

Filtering tiny_mce_version

The first filter alters the TinyMCE version number to trick the browser into believing a new version is being used. Why? because TinyMCE caches absolutely everything and the changes we will be adding might not show up otherwise.

Filtering mce_external_plugins

The second line stores a reference to the JavaScript file containing our code in the array for TinyMCE’s external plugins.

Filtering mce_buttons_2

Finally, we push our button into the buttons array. These are the buttons that will be displayed on the toolbar. Notice the number 2 at the end the of the filter’s name. This is because we will be adding the buttons to the secondary bar in TinyMCE, the lower bar that includes text format, underline and other buttons. Were we adding it to the top bar, we would be using mce_buttons instead.

Coding the buttom command in JavaScript

Let’s check how to create the PHP button, the other buttons are essentially the same:

Labeling the button. Internationalization.

Now we need to add the text labels for our button. TinyMCE is prepared for localization in every language and all you need to do is to create a langs folder at the same level than the .js plugin file and create a file with the name of the language you need. For example, we will create the en.js file and we will add the following:

[js]
tinyMCE.addI18n("en.ilcsyntax",{
php : "Wrap with [php]",
css : "Wrap with [css]",
html: "Wrap with [html]",
js : "Wrap with [js]"
});
[/js]

And that’s it! wasn’t that really fast? You can now start creating your own buttons for TinyMCE! Here’s the plugin for you to download and inspect it closely.

Adding buttons to speed up burden tasks really enhance the user experience and including this feature in your WordPress themes will be something that your clients will love. Some of the buttons I’ve implemented for clients in the past ranged from populating a shortcode with parameters with a path to a video and a thumbnail, a button to add a different type of blockquote using a class (with the proper editor-style.css tweaking in WP3), a button to hide text sections and reveal them using jQuery, buttons to wrap text with shortcodes creating columns, etc. There are countless uses for these buttons, implementing them in WordPress is really easy, so why not using them?