QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Adding Buttons to WordPress Visual Editor

Adding Buttons to WordPress Visual Editor

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
*/

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);
})();

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");

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");

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

Screen Shot 2015-03-18 at 8.09.54 pm

Mar 18, 2015Narayan Prusty
Facebook Style Infinite ScrollAdd Buttons to WordPress Text Editor
Comments: 8
  1. Fajur
    5 years ago

    How can I add drop down option on button? Please help me.

    ReplyCancel
  2. Fredrik Borgström
    5 years ago

    Great tutorial! Simple and easy to understand. Thanks a lot!

    ReplyCancel
  3. Matt
    6 years ago

    Great tutorial. Thank you!

    ReplyCancel
  4. jeff
    6 years ago

    Very nice tutorial and example. I had been trying to figure my way into how to do this for a plugin I had in mind. Thanks,

    ReplyCancel
  5. Richard
    6 years ago

    Following the instructions exactly this works perfectly. Now to customise. Thanks for this!

    ReplyCancel
  6. Marcus
    6 years ago

    When I added this code for the php file, the visual editor is completely gone, help?

    ReplyCancel
  7. Robbiegod
    6 years ago

    hi there, just wanted to say thanks for writing this out. It definitely saved me some time trying to add a simple button to the WYSIWYG editor.

    @John – I would recommend first following his instructions exactly and install that plugin. Test it out to make sure that part works. This means you’ll be installing the plugin, activating it, and then go into a page and see if you see the green circle button in the editor. type some text in the block, select it, then click the green circle button. If the color of the text changes to green, then you should see that its working. I think it will also give you a better understanding of what is actually going on.

    From that point, try to modify it to suit your needs. i found it easy to modify the index.js file and the primary plugin page to have so it simply outputs a simple shortcode. I was trying to change text colors or anything. I just wanted a button for outputting a shortcode.

    ReplyCancel
  8. John
    7 years ago

    Hi. I created a plugin and I want to place a button in the visual editor. I created the button successfully but my problem is how to select the element dynamically created during the button click in addCommand function. When my custom button is clicked, it will dynamically create a button holding the shortcodes for my plugin. But when I try to select the button created, it’s not working. Any help would be much appreciated. Thanks!

    ReplyCancel

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

7 years ago 8 Comments WordPress
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • Plugin Directory and Files
  • What is WYSIWYG HTML Editor?
  • Creating a TinyMCE Plugin
Related Articles
  • WordPress Visual Editor Generated Classes
  • WordPress Set Visual Editor as Default
  • WordPress Set HTML Editor as Default
  • Changing WordPress Admin UI Color Scheme
  • Changing WordPress Admin Footer Text
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license