How to create plugins for wordpress

Here are two good examples to show how to add buttons to wordpress editor by build wordpress plugins. 

WordPress has two different editors: TinyMCE editor(i.e., visual editor) and Text editor(i.e., HTML editor).

WordPress also lets us create custom buttons to both of the visual and text(or HTML) editor. To add a button for Text editor we need to use Quicktags API and to add buttons to the TinyMCE editor we have to use JavaScript APIs provided by the TinyMCE library. Here are two articles that will help you to learn these APIs.

Add Buttons to WordPress Text Editor

Here is an example code snippet which adds a button to the WordPress code editor and wraps the selected text using [code][/code] tags.

Here is how it looks

Screen Shot 2015-03-18 at 9.41.47 pm


Adding Buttons to WordPress Visual Editor

In this tutorial we will create a WordPress plugin that lets you create a button to the wordpress visual editor. This button can be used to change the text color of selected text to green i.e., wrap the text with a span tag with CSS color attribute set to green.

Plugin Directory and Files

Create a directory named visual-editor-buttons. Create two files in it named visual-editor-buttons.php and index.js.

To make the plugin installed add this code to the visual-editor-buttons.php file

What is WYSIWYG HTML Editor?

Web browsers provide APIs to create a WYSIWYG editor but WordPress uses TinyMCE JS library to create the visual editor. To add a button for the visual editor we need to create a TinyMCE plugin.

Creating a TinyMCE Plugin

A TinyMCE plugin is a set of functions we want to add to the TinyMCE editor.  Building a TinyMCE editor button is a new function, so we have to create a plugin and then register the button via the plugin.

Place the following code in the index.js file to create the plugin and add the button with its functions.

Now it’s time to enqueue this plugin script so the plugin is created and a button can be added. The following is the code to enqueue the above plugin script. We place this code in visual-editor-buttons.php file.

Everything is done but the button is still not visible in the visual editor. This’s because visual editor buttons toolbar is controlled by WordPress. We have to register the button with WordPress. The following code shows how to register the button for WordPress.

Here is how the button looks and how its styles the text

Screen Shot 2015-03-18 at 8.09.54 pm

The post is from: