Wordpress 4.1 TinyMce button plugin

Question

I'm trying to add a button on the 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 does not work. I made allot of search on google at least i tried to find something, but no results.

Any one know what is wrong with that tutorial !?

What I'm trying to do is just add a button on the tinymce that gets an youtube url and adds a custom html with the link in the place where is the cursor.

Thanks in advance, and I'm really new to the php, wordpress, tinymce thing.

Edit:

Trying the tutorial that @Kaloyan Ivanov sugested Link: https://www.gavick.com/blog/wordpress-tinymce-custom-buttons

My steps:

1.I added first 4 php codes in the end of functions.php of my theme

        //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 named text-button.js in the same folder of the theme where functions.php is 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 does not work it desapears all the tinymce buttons from the editor

Screenshot of tinymce editor

Finally Working with just a little change as sugested by Kaloyan Ivanov:

Changet the line:

$plugin_array['gavickpro_tc_button'] = plugins_url( '/text-button.js', __FILE__ );

with:

$plugin_array['gavickpro_tc_button'] = get_bloginfo( 'stylesheet_directory' ) . '/text-button.js';

Thank's to Kaloyan Ivanov and gavick.com/blog this works on the new tinymce editor of wordpress 4.1

Well I do all the steps, no error or something just the buttons aren't there as expected. — em.rexhepi

Kaloyan Kaloyan · Accepted Answer · 2015-02-18T18:49:39

Check the following tutorial, it appears to be for the latest version of TinyMCE (and it is updated recently).

https://www.gavick.com/blog/wordpress-tinymce-custom-buttons

The tutorial you linked is probably for the TinyMCE that was in WordPress prior to 3.9.

Edit: Did a quick test. Seems to be working. :)

A 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 in your functions.php file
Replace plugins_url( '/text-button.js', __FILE__ ); with get_bloginfo('stylesheet_directory') . /text-button.js (might need adjusting if the file is in a subdirectory).
Paste the javascript code from the fifth block in the javascript file you created.

(note this is just a quick example for implementing it in a theme so you can get the main idea, if you are actually building a plugin, you should use the plugins_url( '/text-button.js', __FILE__ ) syntax).

http://codex.wordpress.org/Function_Reference/plugins_url

Wordpress 4.1 TinyMce button plugin

1 Answers