How to Upgrade Your TinyMCE WordPress WYSIWYG Editor

The WordPress blogging platform is simply the best available product out there today but it’s not perfect. I can rant and rave about how cool and customizable WordPress is but you already know that. What I’d like to talk about is the WYSIWYG toolbar and how it’s great for professionals, it’s in need of an upgrade for the average joe user.

I’ve been working with a client to build her new web site and we agreed WordPress was the best CMS available for the price she was willing to pay. As we got closer to completing the project, it was time for her to learn how to post. I walked her through a basic example and she found it very easy but wondered why the WYSIWYG editor didn’t have an H2 or H3 html tag available. Good question and so my quest began on how to customize the toolbar.

What I Discovered
The default WordPress toolbar uses TinyMCE and apparently there are more buttons already built in — they just need to be activated. Surprisingly, there’s not a solid solution out there and after trying out several plugins, I ended up finding my answer. A very detailed post on AI3 explains how to download and install the plugin. In a nutshell, here’s all you need to do:

• Download the ExtendedTinyMCE.zip from AI3’s site
• Unzip to a local folder on your computer
• Copy advanced-wysiwyg.php into your WordPress plugin directory
• Copy the 7 folders within the plugins directory to wp-includes\js\tinymce\plugins
• Activate the plugin in WordPress
• Create a new post and see if the advanced toolbar is visible

I actually had to ctrl+reload the page the first time before it showed up but then it was smooth sailing. Although the advanced TinyMCE toolbar worked, I still wanted to customize the buttons. Here’s what it looked like after installation:

The good news is this plugin makes it easy to customize. Just open the advanced-wysiwyg.php file and look for the “extended_editor_mce_buttons” functions. Just remove or shuffle around the names to get the layout you want. FTP the file back to your plugins directory and see if it’s what you wanted. Here’s what my final WYSIWYG toolbar looked like:

If you want the same exact layout, you can download my custom version of the plugin here. Please note, I am not the author of this plugin and cannot provide support. You should review the comments and FAQ on the AI3 site for help.