When creating websites for clients, especially those who are not so familiar with website editing or the internet in general, it is always useful to customize the WordPress Admin to make it simpler and more intuitive.

Once customization is that of adding functionality to the TinyMCE visual editor. For example, you might want to let clients easily select a paragraph of text and give it a particular style, such as increasing its padding and making a background for it. As a developer you can easily code up the styles for that, but how do we make it easy for the clients to select the paragraph they want to style in this manner?

WordPress is bundled with the open-source HTML WYSIWYG editor TinyMCE.

This is the default interface (in Visual mode) that you will see when adding a new post or page:

As you can see above, the usual buttons common to all WYSIWYG editors are all there. However, many WordPress developers and users many times want to add some more functionality to that interface. The most commonly asked-for upgrade is that of adding a Style selector to the default TinyMCE interface. The good thing is that WordPress enables us to switch on a new button through some code as described in the Codex. Some buttons and controls aren’t enabled by default but can be enabled if we need them.

The code below will enable the Style Select button in WordPress’ TinyMCE. The code can be placed into the theme’s functions.php file or a separate plugin file.

[php]
function my_formatTinyMCE($init) {
$init[‘theme_advanced_buttons2_add’] = ‘styleselect’;
$init[‘theme_advanced_styles’] = ‘PDF=pdf’;
return $init;
}
add_filter(‘tiny_mce_before_init’, ‘my_formatTinyMCE’);
[/php]

What the code above does is to add the ‘Style select’ dropdown (control included within TinyMCE) to the 2nd row (theme_advanced_buttons2_add)of buttons in TinyMCE, then add a ‘PDF’ style to the ‘Style select’ dropdown. The ‘PDF=pdf’ part of the code above instructs WordPress to display the text ‘PDF’ within the Styles dropdown, but apply a class of ‘pdf’.

Note: If you are using the TinyMCE Advanced plugin you need to omit the first line of the function above, else it will cause a conflict and you’ll have problems with the editor.

Thus when we highlight a paragraph of text and click on the ‘PDF’ style within the style selector, the code will be transformed into:

[html]<p class=”pdf”>This is my paragraph content.</p>[/html]

This is therefore the result:

Let’s take it one step further, and achieve more control over which buttons are displayed. With the code below, we are instructing WordPress to only display the buttons mentioned in the array:

[php]
function mytheme_mce_buttons($arr) {
return array(‘bold’, ‘italic’, ‘|’, ‘bullist’, ‘numlist’, ‘|’, ‘formatselect’, ‘styleselect’, ‘|’, ‘link’, ‘unlink’ );
}
add_filter( ‘mce_buttons’, ‘mytheme_mce_buttons’ );
[/php]

To wrap up the part about buttons, if you need to remove unwanted buttons and options from TinyMCE, you can use the following code:

[php]
function disable_mce_buttons( $opt ) {
$opt[‘theme_advanced_disable’] = ‘bold,italic’;
return $opt;
}

add_filter(‘tiny_mce_before_init’, ‘disable_mce_buttons’);
[/php]

Next, we can try something more advanced, the addition of totally custom buttons to TinyMCE. These would be buttons that provide functionality that we come up with, and are not included in the list of official TinyMCE buttons you can enable or disable at will. The best way to do this is to create a plugin. I won’t be repeating what other tutorials have already explained very well, so here are links to the best tutorials about creating new buttons for TinyMCE:

Ditio.net Adding Custom Buttons to WordPress TinyMCE

Finally, one word of advice, do not place a gazillion shortcodes into your theme’s functions.php file, if you would like to know the reasons, read this excellent post by Justin Tadlock.

For most clients, my preferred way of adding functionality to TinyMCE is either through the Style selector for visual styles or through the Shortcodes Pro plugin for adding more advanced functionality. Yet another plugin that can do the job is Post Snippets which is free.