Help adding Button to TinyMCE Editor in WordPress from Plugin File!

Question

Hi everyone!

I am really stuck even after reading countless blogs and tutorials on how to add a button to the tinyMCE editor.

I am working within the plugin directory.

The button should open a modal window for me to all the code for a form.

I really hope someone can help, maybe Andrew Chalkley with it needing jQuery or Zac Gordon with it being a WordPress issue :)

I also notice from this that there really is not clear tutorial on the web that could get me though this so maybe treehouse wants to be extra awesome and do a workshop :D

Thanks to anyone who helps!

Craig

Answer 1 · 2015-05-18T17:45:07Z

May 18, 2015 5:45pm

Its no problem Andrew I got here in the end :)

For anyone who may find this post actually it may be helpful to see how, as it was very difficult to find a decent post on how to achieve this.

Ok so the main thing I had to get to grips with was the file structure so below is the files and the structure needed to simply get this button on the tinyMCE editor(This Button Will Do nothing as a result of the below code it will just be there ready for you to jazz it up a little):

File Structure

MyPlugin
-my_plugin.php
-readme.txt
-JS Folder
--my_plugin.js

The readme.txt needs your usual bumf to get the plugin working, if you don't know what that is here it is just in case:

=== Bootstrap / Flexox Button Shortcodes ===
Contributors: craig watson
Tags: bootstrap, buttons, shortcode, shortcodes, flexbox
Requires at least: 4.0
Tested up to: 4.2
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html

Wordpress Plugin to add Twitter Bootstrap Buttons with Flexbox Responsive Layouts

== Description ==

Bootstrap / Flexox Button Shortcodes will let you create and add buttons with flexbox layout through the TinyMCE rich-editor.

Please report issues [here](http://treehouse.taught.me.everything.i.know.blame.them.com :) ).

== Installation ==

1. Unzip the folder.
2. Upload that folder to your plugins directory.
3. Activate your new plugin.
4. Start adding shortcodes.

== Changelog ==

1.0 - Here We GO!!

== Screenshots ==

OK on to the button making and hooking:

Now into your main plugin file for this example it is the my_plugin.php. Again if you have come across this post and are just reading I have included the header comment needed to get a plugin working.

<?php
/*

Plugin Name: Bootstrap / Flexox Button Shortcodes
Plugin URI: http://digimouse.co.uk/
Description: A shortcode generator to enhance your bootstrap button layout
Version: 1.0
Author: Craig Watson
Author URI: http://digimouse.co.uk/about/

*/

/* Include the JS file that makes adding the custom timyMCE 
 *  button a custom tinyMCE plugin (Very Important)
 */

function example_plugin( $plugin_array ) {

    $plugin_array['example_plugin_array'] = plugins_url( '/js/my_plugin.js', __FILE__ );

    return $plugin_array;
}

?>

The above is referencing the my_plugin.js file in the js folder we are about to add some code to so lets dive right in :)

jQuery(document).ready(function ( $ ) {
    ( function() {

        //This is referencing to your plugin array in your my_plugin.php
        tinymce.PluginManager.add( 'example_plugin_array', function( editor, url ) {

            // This will reference a button function we will now create
           // in the my_plugin.php file.
            editor.addButton( 'my_plugin_button', {

                text: 'BF Buttons',
                icon: false

            } );

        } );

    } )();
});

So we have all the js we need to whip in a button on the tinyMCE editor. Lets finish this on in the my_plugin.php file and you can then activate you plugin and fingers crossed I haven't forgotten anything :)

<?php
/* This is the complete functions needed including
 * the one mentioned previously to let you see all in one place
 */

/* Include the JS file that makes adding the custom timyMCE 
 *  button a custom tinyMCE plugin (Very Important)
 */
function example_plugin_function( $plugin_array ) {

    $plugin_array['example_plugin_array'] = plugins_url( '/js/my_plugin.js', __FILE__ );

    return $plugin_array;
}}


//Add the button to hook into via js
function my_plugin_button_function( $buttons ) {

    array_push( $buttons, 'my_plugin_button' );

    return $buttons;
}


//Filter above functions through relevant tinyMCE hooks.
function my_plugin_tinymce_function() {

    add_filter( 'mce_external_plugins', 'example_plugin_function' );

    //Add to end of line 3 for TinyMCE
    add_filter( 'mce_buttons_3', 'my_plugin_button_function', 20 );
}
add_action( 'admin_head', 'my_plugin_tinymce_function' );

?>

You can change the row the button is on by altering the mce_buttons filter and the priority via the number on the end.

If you get stuck be sure to let me know and I will do my best to help, I also have the code to get that button to open an external html file with a form and have that for input data to the editor so the word of shortcodes is your oyster right now :)

I hope this makes some sense and helps people in need out :)

Craig

Answer 2 · 2015-05-18T16:25:52Z

May 18, 2015 4:25pm

It's been years since I've done any TinyMCE stuff. It's all but a distant memory. I live in the world of Markdown now.

Welcome to the Treehouse Community

Looking to learn something new?

Craig Watson

Craig Watson

Help adding Button to TinyMCE Editor in WordPress from Plugin File!

2 Answers

Craig Watson

Craig Watson

Andrew Chalkley

Andrew Chalkley