Automatically Create Media Buttons for Shortcode Selection
To automatically create media buttons for shortcode selection in WordPress, follow the steps below:
Step 1: Add the Button to TinyMCE Editor
Add the following PHP code to your theme’s functions.php file or a custom plugin:
function my_add_tinymce_button() {
if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
return;
}
if ( get_user_option( 'rich_editing' ) !== 'true' ) {
return;
}
add_filter( 'mce_external_plugins', 'my_add_tinymce_plugin' );
add_filter( 'mce_buttons', 'my_register_tinymce_button' );
}
add_action( 'init', 'my_add_tinymce_button' );
function my_register_tinymce_button( $buttons ) {
array_push( $buttons, 'separator', 'my_shortcode_button' );
return $buttons;
}
function my_add_tinymce_plugin( $plugin_array ) {
$plugin_array['my_shortcode_button'] = get_template_directory_uri() . '/js/my-tinymce-button.js';
return $plugin_array;
}
Step 2: Create the JavaScript for Button Action
Create a JavaScript file named my-tinymce-button.js in your theme’s js directory with the following content:
(function() {
tinymce.create('tinymce.plugins.MyShortcodePlugin', {
init : function(editor, url) {
editor.addButton('my_shortcode_button', {
title : 'Insert Shortcode',
icon: 'icon dashicons-welcome-write-blog', // Use a Dashicon class or your custom icon here
onclick : function() {
editor.windowManager.open({
title: 'Insert Shortcode',
body: [{
type: 'listbox',
name: 'shortcode',
label: 'Select Shortcode',
'values': [
{text: 'Shortcode 1', value: '[shortcode1]'},
,
// Add more shortcodes here
]
}],
onsubmit: function(e) {
editor.insertContent(e.data.shortcode);
}
});
}
});
},
createControl : function(n, cm) {
return null;
},
});
tinymce.PluginManager.add('my_shortcode_button', tinymce.plugins.MyShortcodePlugin);
})();
Step 3: Add the Necessary Styles or Icons
Ensure any custom icons or styles are properly defined and enqueued.
Step 4: Test Your New Button
After implementing the above steps, check the WordPress editor to see your new button in action.
This basic implementation can be extended with additional functionality based on your needs.
Learn WordPress Plugin with Tinymce Editor Beginners Tutorial (#1) Introduction about functionality
Related Videos:
