How to Add Buttons and CSS Classes to TinyMCE

Update: Here’s a better way of adding custom styles to the Styles dropdown in TinyMCE.

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 customise the WordPress Admin in order to make it simpler and more intuitive.

Once customisation 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. As you can observe on the TinyMCE buttons page. 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.

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:

This is therefore the result:

Another great tutorial about including your own classes in TinyMCE can be found here.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:

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

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

Ditio.net 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 which can do the job is Post Snippets which is free.

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

About Jean Galea

Jean Galea is a WordPress developer, podcaster and entrepreneur. He is the founder of WP Mayor and WP RSS Aggregator. His personal blog can be found at jeangalea.com. Check out his podcast focused on doing business with WordPress over at Mastermind.fm.

7 Responses

  1. Nicolas
    Nicolas May 16, 2011 at 15:14 | | Reply

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

    You list here a lot of usefull resources about tinymce.

  2. Neil Davidson
    Neil Davidson May 16, 2011 at 19:58 | | Reply

    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. Troy Chaplin
    Troy Chaplin July 8, 2011 at 13:21 | | Reply

    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 3.4.2.1 of TinyMCE Advance.

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

Leave a Reply

  
Please enter an e-mail address