Home » How to Add a Custom WordPress TinyMCE Button to add Modal and Shortcode

How to Add a Custom WordPress TinyMCE Button to add Modal and Shortcode

Custom WordPress TinyMCE Button Modal Shortcode

This is a simple tutorial that will show you How to Add a Custom WordPress TinyMCE Button Modal Shortcode with a dashicon button into the WordPress Editor step by step with code snippets. In this example I’m going to be creating a “Buy Now” type of button in TinyMCE that initiates a modal window that will ask the user for fields and insert a shortcode at the current position in the editor with the shortcode attributes populated by the values from the inputs in the modal.

Place this code in functions.php

Note: As you can see in the example above, I’m adding a custom javascript file on line 18. The path to this file needs to be changed to reflect the path of a file you’re about to create.

Now we can create a buybutton.js file (or whatever you want to name it) and change the path and filename on line 18 in the code snippet above to reflect this new file path and filename. Once you’ve created that file, paste the following into that file…

Place this code in your custom buybutton.js script

If you want to modify the names of things, just make sure that you use find/replace where you can because many of these names in the filters, actions, and other areas will need to match in order for this to work. Also, if you want to change the icon of the button to another dashicon, feel free to look one up from a site like http://calebserna.com/dashicons-cheatsheet/ and replace the “content” CSS property with one of the unicodes from that page.

Update: (in response to Himanshu’s question from the comments below)
If you would like to add other input types, here is a comprehensive list of all the different input types that TinyMCE will allow you to create in the windowManager.open() function:

The object above would go inside lines 13-25 of your buybutton.js script (replacing the object inside the body property’s array) and will give you a nice example of the various input types all in one modal:
TinyMCE Custom Modal - Input Types

Again, this is just a basic tutorial on How to Add a Custom WordPress TinyMCE Button Modal Shortcode into the WordPress Editor. If you are wanting to accomplish something else with TinyMCE, or have any issues, questions, or comments, please feel free to leave a comment in the comments section below.

9 comments on “How to Add a Custom WordPress TinyMCE Button to add Modal and Shortcode

    • Jeff Hays on

      Hey Himanshu,

      Great question! Here’s how to add a select dropdown, or “listbox” as they call it:

      This documentation is a bit tricky to find online so I’ll be sure to update my tutorial above to add every type of input you can create in the TinyMCE modal.

      Reply
  1. Himanshu Anand on

    great update, m trying to build something complex using this code, i’ll share when its ready. Thanks for this update. That’s really helpful

    Reply
      • Jeff Hays on

        Hey Andrew,

        You are absolutely correct! Just setup an AJAX receiving function that you can use when building the values of the form that pops up from the TinyMCE button. You could then fire your AJAX call in the callback of the modal.

        Alternatively (and probably better because you don’t need to wait for the AJAX response) is to find a clever way to localize the data with wp_localize_script(). This will allow you to make your server side data available to the buybutton.js script that creates the button and modal.

        Reply
    • Jeff Hays on

      Hey Ron,

      Since there are little to no styles involved in this implementation, my first guess would be that maybe a theme or plugin is adding things to the admin that make this get cut off. Does this happen when you create a new post (a post with no content)? If it does then try switching to one of the default Twenty* themes that ship with WordPress. If that still doesn’t work, disable each plugin you have one and a time and use process of elimination to find the plugin conflict. Anything past that I might need to see a screenshot to help further. Hope this helps.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *