How To Add Custom Buttons In WordPress Visual Editor?

WordPress visual editor provides you a semi-WYSIWYG (What You See is What You Get) content editor to easily write, edit, and format your text and rich media content in a view similar to word processors etc. You can switch between HTML i.e. text editor and visual editor from the top right corner of the post editing box.

In this lesson you will see how to add custom buttons to the WordPress Visual Editor. This is not about extending visual editor with more TinyMCE buttons to increase text formatting options like that of Word Processor, though you an do that also but there are other easy ways of doing so like we have discussed earlier in this lesson

Instead the lesson is about adding your own custom buttons in the Visual Editor, as well as the HTML Editor. You can then add HTML code to the button, either as a wrap (before, after) or as a single block.

On top of that you can also set the CSS to view the effect of the button directly in your WordPress website’s Visual Editor.

Visual Editor Custom Buttons is a WordPress plugin that makes this thing easy and possible from your admin interface. It comes with a large number of ready to use button icons, and also allows you to add your own.

Start by installing the plugin in your WordPress website, activate it the visit ‘Visual Editor Custom Buttons’ settings page on your admin area dashboard. On this page you would be able to create new buttons, add custom code for them and enable them on visual editor.

As said by the developer, “You may encounter an Error message right after installation. This will only appear once and will not be repeated. I havn´t found a solution yet to avoid it from showing up. Any tips on how to get rid of it is highly appreciated.”

The plugin can be used for customizing the Visual Editor, add special features or simplify the content update process for the novice users registered on your WordPress website.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.