Add Custom Button to WordPress Visual Editor

Yesterday I wrote an post on responsive web design and each time I wanted to mark the words with the <code> HTML tag, I had to switch to HTML editor, select the word again and click on the code button. Well that was pain in the ass and I don’t want to do that again. :) Now, I knew that you can easily show the hidden buttons to the visual editor.

Here’s an example on how to add the hidden buttons to the visual editor.

function ltw_mce_buttons_2($buttons)
{
	//    Add the hidden buttons to the $buttons array
	$buttons[] = 'sup';
	$buttons[] = 'sub';

	return $buttons;
}
add_filter('mce_buttons_2', 'ltw_mce_buttons_2');

What does mce_buttons_2 filter do? Basically it means that the buttons will be added to the second row in the visual editor. You can of course also use: mce_buttons (first row), mce_buttons_2 (second row), mce_buttons_3 (third row) and mce_buttons_4 (fourth row). Easy right?

Here is the full list of buttons that you can show.

Now, I wanted to add a button to the visual editor that will add <code> HTML tags around the selected word. There are two ways, I could add it as a real button which means I need to write the Javascript plugin for TinyMCE (is the editor that the WordPress uses in case you didn’t know that). The second way, the easier and quicker way is to simply add it to the custom styles. So yeah, let’s do the second version. :)

Enable Style Dropdown

First we need to enable the style dropdown in the visual editor. The code to show the style dropdown is basically the same as I have posted it above. But in this case I want the style dropdown at the begining of the second row and for that we need to insert the button as the first item in the array using array_unshift php function.

function ltw_mce_buttons_2($buttons)
{
	array_unshift($buttons, 'styleselect');

	return $buttons;
}
add_filter('mce_buttons_2', 'ltw_mce_buttons_2');

If you load the editor now, you will see that the styles dropdown is shown in the second row and it contains some default style formats.

We need to add our own.

Register Our Own Style Format

Basically we will register our own style format and set some options for it and we need to make it to act as inline element not block element.

Here’s the code:

function ltw_tiny_mce_before_init($init_array)
{
	//	Set the settings.
	//	title = title that will be shown in the dropdown
	//	inline = name of the inline element, this must be valid HTML element
	//	wrapper = means that the element in question is a container, a closing tag will be added after the selected text
	$style_formats = array(
		array(
			'title' => 'code',
			'inline' => 'code', // To make code act as a block element, change 'inline' to 'block'
			'wrapper' => true
		)
	);

	//	TinyMCE uses json for configuration of the buttons so we need to use json_encode
	$init_array['style_formats'] = json_encode($style_formats);

	return $init_array;
}
add_filter('tiny_mce_before_init', 'ltw_tiny_mce_before_init');

As you can see we added a filter called tiny_mce_before_init and set some options for the custom style format.

There are a few extra options like adding class, styles, etc. that I did not use as I don’t need them in this case.

Now reload the editor and you have a code style in the dropdown. Easy, the end. ;)