Wordpress 4.1 TinyMce Button Plugin
I'm trying to add a button on tinymce editor in wordpress
WordPress version: 4.1
I followed this tutorial : http://code.tutsplus.com/tutorials/guide-to-creating-your-own-wordpress-editor-buttons--wp-30182
But it doesn't work. I've at least googled the assignment and I've tried to find something but no results.
Anyone know what's wrong with the tutorial?
All I want to do is add a button on tinymce that takes the youtube url and add a custom html with a link where the cursor is.
Thank you in advance, I'm really new to php, wordpress and tinymce.
edit:
Try the tutorial link suggested by @Kaloyan Ivanov : https://www.gavick.com/blog/wordpress-tinymce-custom-buttons
My steps:
1. I added the first 4 php codes at the end of the theme's functions.php
//add custom plugin to tinymce
add_action('admin_head', 'gavickpro_add_my_tc_button');
function gavickpro_add_my_tc_button() {
global $typenow;
// check user permissions
if ( !current_user_can('edit_posts') && !current_user_can('edit_pages') ) {
return;
}
// verify the post type
if( ! in_array( $typenow, array( 'post', 'page' ) ) )
return;
// check if WYSIWYG is enabled
if ( get_user_option('rich_editing') == 'true') {
add_filter("mce_external_plugins", "gavickpro_add_tinymce_plugin");
add_filter('mce_buttons', 'gavickpro_register_my_tc_button');
}
}
function gavickpro_add_tinymce_plugin($plugin_array) {
$plugin_array['gavickpro_tc_button'] = plugins_url( '/text-button.js', __FILE__ ); // CHANGE THE BUTTON SCRIPT HERE
return $plugin_array;
}
function gavickpro_register_my_tc_button($buttons) {
array_push($buttons, "gavickpro_tc_button");
return $buttons;
}
2. Then I created a file called text-button.js in the same theme folder as functions.php and added the code
(function() {
tinymce.PluginManager.add('gavickpro_tc_button', function( editor, url ) {
editor.addButton( 'gavickpro_tc_button', {
text: 'My test button',
icon: false,
onclick: function() {
editor.insertContent('Hello World!');
}
});
});
})();
but this doesn't work, it makes all tinymce buttons in the editor disappear
Ultimately, just a little change (as suggested by Kaloyan Ivanov):
Change the line:
$plugin_array['gavickpro_tc_button'] = plugins_url( '/text-button.js', __FILE__ );
and:
$plugin_array['gavickpro_tc_button'] = get_bloginfo( 'stylesheet_directory' ) . '/text-button.js';
Thanks to Kaloyan Ivanov and gavick.com/blog, it's new tinymce editor for wordpress 4.1
Check out the tutorial below, it appears to be the latest version of TinyMCE (and has been updated recently).
https://www.gavick.com/blog/wordpress-tinymce-custom-buttons
The tutorial you linked probably worked for TinyMCE in WordPress prior to 3.9.
Edit: Did a quick test. seems to be working. :)
Quick guide to get it working:
- Open https://www.gavick.com/blog/wordpress-tinymce-custom-buttons#tmce-section-1
- Paste the four codes of php into your functions.php file
- Replace
plugins_url( '/text-button.js', __FILE__ );
withget_bloginfo('stylesheet_directory') . /text-button.js
(may need to be adjusted if the file is in a subdirectory). - Paste the javascript code from the fifth paragraph into the javascript file you created.
(Note that this is just a quick example of implementing it in a theme , so you can see the main idea, if you're actually building a plugin, you should use the syntax).plugins_url( '/text-button.js', __FILE__ )