WordPress Button Shortcode – Add button to WordPress editor

WordPress Button Shortcode – Add button to WordPress editor

WordPress button shortcode – Today, We re going to learn how to add button to WordPress editor with a popup. WordPress use TinyMCE editor, We can easily add a shortcode for the button in WordPress TinyMCE editor. In addition, I created the article for how to create a shortcode in WordPress. If you don’t know then read it first. It’s really helpful to understand this article.

WordPress button shortcode is must request if you want to happy your users. Because using button shortcode users able to use the WordPress shortcode easily in TinyMCE editor. WordPress button shortcode provides a user-friendly interface to use shortcode in WP.

Let’s start, Today, We are going to add button to WordPress editor for shortcode.

First of all, I hope you created the shortcode for button in WordPress. If not, then create it first.

WordPress Button Shortcode

WP TinyMCE add button functionality is really useful for the user to use your theme and plugin shortcode easily in the WP editor. So, Make sure before serve your plugins and theme to your users create button shortcode.

Shortcode for button in WordPress

WordPress allows us to customize the TinyMCE editor. We can add the new button for our custom shortcodes into the editor. First, We should register our button to the WordPress then we can add TinyMCE code for the new button.

Let’s add button to WordPress editor step by step. First of all, We are going to register our button to the WordPress theme or plugin. Just open WordPress current theme functions.php file.

add_action( 'init', 'tryvary_buttons' );
function tryvary_buttons() {
    add_filter( "mce_external_plugins", "tryvary_add_buttons" );
    add_filter( 'mce_buttons', 'tryvary_register_buttons' );
}
function tryvary_add_buttons( $plugin_array ) {
    $plugin_array['tryvary_code_block'] = get_template_directory_uri() . '/assets/js/tiny-code-btn.js';
    return $plugin_array;
}
function tryvary_register_buttons( $buttons ) {
    array_push( $buttons, 'tryvary_code_block'); // droid_title
    return $buttons;
}

Just copy and paste the code then after changing the button name as you want.

TinyMCE add button

Finally, We register our TinyMCE button into WP. Now, We are going to add button to WordPress editor using the TinyMCE JS code. We are going to create a button in TinyMCE editor with a popup. TinyMCE allows us to open a popup when the user click on the button. So, We are going to create a popup with text boxes for taking value from the user. We can easily do it using WordPress TinyMCE add button functionality.

Now, Let’s create the JS file at  assets/js/tiny-code-btn.js then write the JS code like for WordPress TinyMCE add button.

(function() {
    tinymce.create('tinymce.plugins.Tryvary', {
        init : function(ed, url) {
            ed.addButton('tryvary_code_block', {
                title : 'Code',
                cmd : 'tryvary_code_block',
                icon: 'code'
            });

            ed.addCommand('tryvary_code_block', function() {
                ed.windowManager.open({
                    title: 'Tryvary - Insert Information',
                    body: [{
                        type: 'textbox',
                        name: 'firstname',
                        placeholder: 'Enter First Name',
                        multiline: true,
                        minWidth: 700,
                        minHeight: 30,
                    },{
                        type: 'textbox',
                        name: 'age',
                        placeholder: 'Enter Age',
                        multiline: true,
                        minWidth: 700,
                        minHeight: 30,
                    },{
                        type: 'textbox',
                        name: 'code',
                        placeholder: 'Enter content',
                        multiline: true,
                        minWidth: 700,
                        minHeight: 150,
                    }],
                    onsubmit: function( e ) {
                        ed.insertContent( '[tryvary_shortcode name="'+e.data.firstname+'" age="'+e.data.age+'"]'+e.data.code+'[/tryvary_shortcode]');
                    }
                });
            });
        },
    });
    tinymce.PluginManager.add( 'tryvary_code_block', tinymce.plugins.Tryvary);
})();

Finally, Our TinyMCE button is ready to use. You can check the button will look like code <> is visible on the WordPress editor. It’s will look like below when you click on it the popup will appear like

shortcode for button in wordpress wordpress tinymce add button

When the user click on the button the popup will appear like above. User can easily add the data and use our shortcode.

Finally, We are ready with shortcode for button in WordPress Now, you easily WordPress TinyMCE add button for your WP plugins or themes by following the steps. Then after, User can easily use your shortcode in WordPress posts and pages.

In conclusion, Today I show you how to add button to WordPress editor. I hope this article is helpful to you. If you have any question please write the comment. We are always ready to help you.

Related Posts

  1. Email unique validation in Laravel ignore id on update
  2. WordPress shortcode – How to create shortcode in WordPress
  3. WordPress change URL in database using MySQL Query
  4. WordPress jQuery is Not Defined or undefined
  5. PHP remove HTML tags from string using strip_tags
  6. Enable shortcodes in widget WordPress
  7. PHP remove non-empty directory programmatically
  8. PHP File upload step by step with example
  9. How to use jQuery noConflict mode in WordPress
  10. Laravel 6 integrate AdminLte admin theme jeroennoten

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Search Posts

Subscribe To Newsletter

Get Early Access To New Articles, Plugins, Discount Codes And Quickly Brief Updates about tips and tricks

Join 308 other subscribers