How to Add Buttons and CSS Classes to TinyMCE

Share on facebook
Share on twitter
Share on email
Our Sponsors
Build unbuildable WordPress websites
The best no-code Instagram feed plugin for WordPress
Automatic content aggregation & curation
Share on facebook
Share on twitter
Share on email

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 in order 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 increase its padding and make 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:

Tinymce default

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 on the Codex. There are many buttons and controls that 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.

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’);

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 actually 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:

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

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

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

add_filter(‘tiny_mce_before_init’, ‘disable_mce_buttons’);

Next we can try something more advanced, the adding 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:

Nettuts’ WordPress Shortcodes: The Right Way Adding Custom Buttons to WordPress TinyMCE

Unrelated Media’s WordPress: Adding Custom Buttons to TinyMCE

If all you want is to give your users the ability to insert shortcodes via buttons, and you don’t feel like dabbling in code, there is an excellent plugin on CodeCanyon called Shortcodes Pro which enables you to do just this from a GUI.

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.

If you enjoyed this post, make sure to subscribe to WPMayor’s RSS feed.

Table of Contents

7 Responses

  1. “Unrelated Media’s WordPress: Adding Custom Buttons to TinyMCE” link is broken.

    You list here a lot of usefull resources about tinymce.

  2. Thank you for pointing out my tutorial. One of the advantages to my approach is less code overhead. Shortcodes are loaded on every page, generally, not just the admin.

    Just don’t build 50 new buttons! Like shortcodes, Moderation is key.

  3. Nice tutorial! Like the option of adding styles into the drop down menu!

    I just gave it a try but when I load a content page, nothing in the content editing area shows up. I’m running WordPress 3.2 as well as version of TinyMCE Advance.

    Think either one of these would prevent this function from working properly?

    1. Thanks Troy, haven’t tested it with the latest version of WP, I can’t exclude it being the cause of the function possibly not functioning well.

Leave a Reply

Your email address will not be published. Required fields are marked *

Stay up-to-date with the Mayor
Sign up to receive one weekly email about our latest reviews, tutorials, giveaways and more.