How to Add Buttons and CSS Classes to TinyMCE

If you purchase through a link on our site, we may earn a commission. Learn more.

Table of Contents
WP Engine High Performance Hosting
BionicWP Hosting

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:

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 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.

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

Jean Galea

Jean Galea is an investor, entrepreneur, and blogger. He is the founder of WP Mayor, the plugins WP RSS Aggregator and Spotlight, as well as the podcast. His personal blog can be found at

Discover more from our archives ↓

Popular articles ↓

7 Responses

  1. 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.

  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. “Unrelated Media’s WordPress: Adding Custom Buttons to TinyMCE” link is broken.

    You list here a lot of usefull resources about tinymce.

Share Your Thoughts

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

Claim Your Free Website Tip 👇

Leave your name, email and website URL below to receive one actionable improvement tip tailored for your website within the next 24 hours.

"They identified areas for improvement that we had not previously considered." - Elliot

By providing your information, you'll also be subscribing to our weekly newsletter packed with exclusive content and insights. You can unsubscribe at any time with just one click.