Adding Custom Button to Visual Editor in WordPress

CMS & WordPress
1

Hi,

I am hoping this is not redundant but I cannot seem to find the answer elsewhere.

I am looking for a tutorial on how to add a custom button to the TinyMCE visual editor within WordPress. I have developed a theme for a client and I would like to enhance their editing capabilities. Simply put, when they click this “custom button” a opening and closing div tag with a specific class will be inserted.

I am hoping to do this without a plugin. Plus, all the plugins I have found only allow for adding buttons to the HTML editor and NOT the Visual editor.

Any guidance or direction would be greatly appreciated.

Thank you,
Bert

2

It is possible, it seems, however I don’t have experience with this.
However having a quick look through the Wordpress documentation it looks like this probably has your answer. But it does state that the article assumes you already know how to write a basic plugin and have knowledge of the Plugin API. If you don’t have that knowledge, well, it’s always a good time to learn!

In terms of plugins for this particular function there is one here and [URL=“http://www.laptoptips.ca/projects/tinymce-advanced/”]here and [URL=“http://wordpress.org/extend/plugins/wp-super-edit/”]even here which mentions buttons for css classes. I’m sure there must be more, but as you would rather do this without a plugin it may be worth writing your own if you can.

Someone else may have more knowledge of this and can probably help you more. It is definitely achievable.

3

Thank you for the information. I will review those items more closely and see if I can make it work.

I did take a quick review of the document on the Codex but it sounds like it may be more trouble that it is worth for this particular project I am developing for the client.

What I may end up doing is taking a plugin that I did find and just integrating it into the theme I designed without having to actually install it. The only downside is that it only adds the button on the HTML side. On the plus side, I can just instruct the client how to use it.

I am still open to other replies should the come forward.

Thanks again!

4

Sorry I couldn’t be of more help but I just haven’t had experience with this before.

I think your best bet is to use this plugin here.

It has a visual interface where you can drag and drop, including custom css classes. It seems pretty simple to set up too:

This TinyMCE plugin allows you to place a special editor.css file in your active theme directory. You can then add CSS classes to the editor.css file that will be displayed in a drop down list provided by the Custom CSS Classes button. You will want to duplicate and classes from your theme’s style.css or other CSS files that you want to use in the visual editor. This is redundant, but this seems to perform better than adding the whole style.css file so you can selectively copy the classes you want to use for your editor.

This plugin uses a callback to add the <active theme>/editor.css file to your editor.

Let us know how you go with it all!

5

Thanks again bo5ton… you were quite helpful. I will check out that plugin and see if it fits into my plans.

Thanks!