This post is a part 2 of Create a WordPress Post Editor Button to Add Shortcode post series.
In this tutorial we will see how to add buttons to the WordPress visual editor. In this tutorial we will create a WordPress plugin which lets you add a button to the 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
<?php
/*
Plugin Name: Visual Editor Buttons
Plugin URI: http://qnimate.com
Description: Adds a button to visual editor.
Author: Narayan Prusty
*/
/*
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?
WYSIWYG HTML editor is a content editor that allows you to see and edit the end result of HTML code directly without writing any HTML code. WordPress visual editor is a WYSIWYG editor. You directly edit the end output while the HTML is generated internally. The generated HTML is available for editing in the text editor.
Web browsers provide APIs to create a WYSIWYG editor but WordPress uses TinyMCE JS library to create the visual editor.
To create a button for the visual editor we need to create a TinyMCE plugin.
Creating a TinyMCE Plugin
A TinyMCE plugin is a set of functionalities we want to add to the TinyMCE editor. Creating a TinyMCE editor button is a new functionality we want to add therefore we need to create a plugin and then add the button via the plugin.
Place this code in the index.js file to create the plugin and add the button with its functionality.
(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);
})();
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 we need to enqueue this plugin script so that the plugin is created and a button is added. Here is the PHP code to enqueue the above plugin script. Place this code in visual-editor-buttons.php file.
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");
{
//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 still the button is not visible in the visual editor that’s because visual editor buttons toolbar is controlled by WordPress. We need to register the button with WordPress also. Here is the PHP code to register the button for WordPress to know about it.
function register_buttons_editor($buttons)
{
//register buttons with their id.
array_push($buttons, "green");
return $buttons;
}
add_filter("mce_buttons", "register_buttons_editor");
{
//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
