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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
function shortcode_button_script() { if(wp_script_is("quicktags")) { ?> <script type="text/javascript"> //this function is used to retrieve the selected text from the text editor function getSel() { var txtarea = document.getElementById("content"); var start = txtarea.selectionStart; var finish = txtarea.selectionEnd; return txtarea.value.substring(start, finish); } QTags.addButton( "code_shortcode", "Code", callback ); function callback() { var selected_text = getSel(); QTags.insertContent("[code]" + selected_text + "[/code]"); } </script> } } add_action("admin_print_footer_scripts", "shortcode_button_script"); |
Here is how it looks
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
|
1 2 3 4 5 6 7 8 |
<?php /* Plugin Name: Visual Editor Buttons Plugin URI: http://qnimate.com Description: Adds a button to visual editor. Author: Narayan Prusty */ |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
(function() { tinymce.create("tinymce.plugins.green_button_plugin", { //url argument holds the absolute url of our plugin directory init : function(ed, url) { //add new button ed.addButton("green", { title : "Green Color Text", cmd : "green_command", image :"https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/32x32/Circle_Green.png" }); //button functionality. ed.addCommand("green_command", function() { var selected_text = ed.selection.getContent(); var return_text = "<span style='color: green'>" +selected_text + "</span>"; ed.execCommand("mceInsertContent", 0, return_text); }); }, createControl : function(n, cm) { return null; }, getInfo : function() { return { longname : "Extra Buttons", author : "Narayan Prusty", version : "1" }; } }); tinymce.PluginManager.add("green_button_plugin",tinymce.plugins.green_button_plugin); })(); |
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.
|
1 2 3 4 5 6 7 8 |
function enqueue_plugin_scripts($plugin_array) { //enqueue TinyMCE plugin script with its ID. $plugin_array["green_button_plugin"] = plugin_dir_url(__FILE__) ."index.js"; return $plugin_array; } add_filter("mce_external_plugins", "enqueue_plugin_scripts"); |
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.
|
1 2 3 4 5 6 7 8 |
function register_buttons_editor($buttons) { //register buttons with their id. array_push($buttons, "green"); return $buttons; } add_filter("mce_buttons", "register_buttons_editor"); |
Here is how the button looks and how its styles the text
