How to add multiple buttons to WordPress post editor with a single plugin?


Spencer Dub

I asked this question in the WordPress community and didn't get an answer, so I thought I'd reach out to this community as well.

I'm tweaking my WordPress installation and adding custom buttons to the visual editor using a custom plugin I wrote. For now, I've followed the tutorial and added a "code" button, but I also want to add a "quote" button that wraps the selected text in a <cite></cite>label. I'm sure I can duplicate the plugin and make smaller changes, but that seems clunky and inefficient and I'd rather add two buttons via the same plugin.

There is a related question about this problem here , but before, it's from a few years, and I'm using WordPress 3.9.1, using the newer version of TinyMCE (visual editor). So I'm not sure how much of this answer is relevant or how to apply it to TinyMCE 4.*.

Here is the PHP script I use to add the "code" button:

<?php

add_action( 'init', 'code_button' );

function code_button() {
    add_filter( "mce_external_plugins", "code_add_button" );
    add_filter( 'mce_buttons', 'code_register_button' );
}
function code_add_button( $plugin_array ) {
    $plugin_array['mycodebutton'] = $dir = plugins_url( 'shortcode.js', __FILE__ );
    return $plugin_array;
}
function code_register_button( $buttons ) {
    array_push( $buttons, 'codebutton' );
    return $buttons;

and the relevant JS file:

(function() {
    tinymce.create('tinymce.plugins.code', {
        init : function(ed, url) {

            ed.addButton('codebutton', {
                title : 'Code',
                cmd : 'codebutton',
                icon: 'icon dashicons-editor-code'
            });

            ed.addCommand('codebutton', function() {
                var selected_text = ed.selection.getContent();
                var return_text = '';
                return_text = '<code>' + selected_text + '</code>';
                ed.execCommand('mceInsertContent', 0, return_text);
            });
        },
        // ... Hidden code
    });
    // Register plugin
    tinymce.PluginManager.add( 'mycodebutton', tinymce.plugins.code );
})();

What changes do I need to make to these files to add another custom button?

Thanks!

Howley

There is a plugin that should help you, it's called Visual Editor Custom Buttons .

Once installed, an option called "Visual Editor Custom Buttons" appears on the dashboard menu,

  • There is an option called Add New
  • Call new styles like Cite.
  • Make sure the "Wrap selection" option is checked
  • In the "Before" box, enter the content to wrap before the content, such as ""
  • In the "After" box, enter what you want to put after the content, such as ""
  • In the "Show in Editor" box above, check one or both of the options there.
  • If Visual/Text is selected, select the button icon/Quick Label (optional)
  • Once you've done all of the above, click on the blue "Publish" on the right side of the screen.
  • Open the page/post you want to use the new style for and highlight the text.
  • Click on the style you just created and insert it.

Related


How to add table under post editor in wordpress?

username I need to add a custom form below the post editor in wordpress. I have a custom post type hut here and I can add the hut and its details like title, details, add custom fields by type plugin, feature images, etc. Now I need to create a custom form bel

How to add table under post editor in wordpress?

username I need to add a custom form below the post editor in wordpress. I have a custom post type hut here and I can add the hut and its details like title, details, add custom fields by type plugin, feature images, etc. Now I need to create a custom form bel

How to Add Custom Shortcode Buttons in TinyMCE Editor WordPress

Harun R Rayhan Hi, I am using the latest version of WordPress. I want to add my shortcode in TinyMCE editor like this image : http://prntscr.com/72ycrs My shortcode is: [my_tabs] [my_tab title = "Tab One Title"]Tab One Content Goes Here[/my_tab] [my_tab title

How to Add Custom Shortcode Buttons in TinyMCE Editor WordPress

Harun R Rayhan Hi, I am using the latest version of WordPress. I want to add my shortcode in TinyMCE editor like this image : http://prntscr.com/72ycrs My shortcode is: [my_tabs] [my_tab title = "Tab One Title"]Tab One Content Goes Here[/my_tab] [my_tab title

How to Add Custom Shortcode Buttons in TinyMCE Editor WordPress

Harun R Rayhan Hi, I am using the latest version of WordPress. I want to add my shortcode in TinyMCE editor with an image like this : http://prntscr.com/72ycrs My shortcode is: [my_tabs] [my_tab title = "Tab One Title"]Tab One Content Goes Here[/my_tab] [my_ta

How to Add Custom Shortcode Buttons in TinyMCE Editor WordPress

Harun R Rayhan Hi, I am using the latest version of WordPress. I want to add my shortcode in TinyMCE editor with an image like this : http://prntscr.com/72ycrs My shortcode is: [my_tabs] [my_tab title = "Tab One Title"]Tab One Content Goes Here[/my_tab] [my_ta

how to add post with own plugin in wordpress

Yaroslav Karaninki Create a wordpress plugin and need this plugin to automatically add posts to wordpress when installed. What is a better solution? pretty flies register_activation_hookAfter the plugin is initialized, you should use to perform any custom func

WordPress Multiple Single Post Templates

MG1 I have a custom post type called funeral and a page that lists all funeral posts. In order to display a single page, I created a file called single-funerals.php and everything works fine. However, now I need to have a separate post page that only shows vid

WordPress Multiple Single Post Templates

MG1 I have a custom post type called funeral and a page that lists all funeral posts. In order to display a single page, I created a file called single-funerals.php and everything works fine. However, now I need to have a separate post page that only shows vid

WordPress Multiple Single Post Templates

MG1 I have a custom post type called funeral and a page that lists all funeral posts. In order to display a single page, I created a file called single-funerals.php and everything works fine. However, now I need to have a separate post page that only shows vid

WordPress Multiple Single Post Templates

MG1 I have a custom post type called funeral and a page that lists all funeral posts. In order to display a single page, I created a file called single-funerals.php and everything works fine. However, now I need to have a separate post page that only shows vid

Wordpress plugin custom post type single page

Dominic Allen I am using a Wordpress plugin that creates custom post types. This custom post type will need its own single.php page. I know I can create a file called single-{custom post type}.php in my theme, but I need to keep this file in the plugins direct

Wordpress plugin custom post type single page

Dominic Allen I am using a Wordpress plugin that creates custom post types. This custom post type will need its own single.php page. I know I can create a file called single-{custom post type}.php in my theme, but I need to keep this file in the plugins direct

Multiple Blog Layouts Single Solution WordPress Plugin

Khushbu Padalia I'm looking for a wordpress plugin that enables me to design blog pages with different layouts based on different wordpress categories and tags. Alkesh Miyani I found a perfect plugin in WordPress called Blog Designer . And this plugin is also

Multiple blog layouts single solution wordpress plugin

Khushbu Padalia I'm looking for a wordpress plugin that enables me to design blog pages with different layouts based on different wordpress categories and tags. Alkesh Miyani I found a perfect plugin in WordPress called Blog Designer . And this plugin is also

Multiple blog layouts single solution wordpress plugin

Khushbu Padalia I'm looking for a wordpress plugin that enables me to design blog pages with different layouts based on different wordpress categories and tags. Alkesh Miyani I found a perfect plugin in WordPress called Blog Designer . And this plugin is also

WordPress: How to add multiple taxonomies in custom post types

Subrata Sarkar I created a custom post type called user-story. This $argslooks like this: $args = array( 'labels' => $labels, 'hierarchical' => true, 'description' => 'description', 'taxonomies' => array('category', 'story-type', 'genre'), 'show

WordPress: How to add multiple taxonomies in custom post types

Subrata Sarkar I created a custom post type called user-story. This $argslooks like this: $args = array( 'labels' => $labels, 'hierarchical' => true, 'description' => 'description', 'taxonomies' => array('category', 'story-type', 'genre'), 'show

WordPress: How to add multiple taxonomies in custom post types

Subrata Sarkar I created a custom post type called user-story. This $argslooks like this: $args = array( 'labels' => $labels, 'hierarchical' => true, 'description' => 'description', 'taxonomies' => array('category', 'story-type', 'genre'), 'show

WordPress: How to add multiple taxonomies in custom post types

Subrata Sarkar I created a custom post type called user-story. This $argslooks like this: $args = array( 'labels' => $labels, 'hierarchical' => true, 'description' => 'description', 'taxonomies' => array('category', 'story-type', 'genre'), 'show

WordPress: How to add multiple taxonomies in custom post types

Subrata Sarkar I created a custom post type called user-story. This $argslooks like this: $args = array( 'labels' => $labels, 'hierarchical' => true, 'description' => 'description', 'taxonomies' => array('category', 'story-type', 'genre'), 'show

How to Add jQuery to a WordPress Plugin

Eddie This can be a very easy question for WordPress experts. I'm new to wordpress and having a problem with jquery. The jQuery library is already included as you can see it with firebug I don't know what I'm missing here. Here is my code. add_action( 'wp_enqu

How to Add jQuery to a WordPress Plugin

Eddie This can be a very easy question for WordPress experts. I'm new to wordpress and having a problem with jquery. The jQuery library is already included as you can see it with firebug I don't know what I'm missing here. Here is my code. add_action( 'wp_enqu

Add related posts to a single post WordPress template

sb0k I'm trying to display a module containing related products in a single post page. I created a cpt called "product" and a taxonomy called "category". What I want to do is to display other products of the same category in a single post page. So far I have s

Add related posts to a single post WordPress template

sb0k I'm trying to display a module containing related products in a single post page. I created a cpt called "product" and a taxonomy called "category". What I want to do is to display other products of the same category in a single post page. So far I have s

Multiple URLs for a single custom post type in WordPress

BIOSTALL I have a real estate website for a real estate agent with a custom post type of " property ". So the current URL structure is: /property/the-address-here Now... on each property, you can choose whether the property is for sale or rent. I now want to