 <p>Check the following tutorial, it appears to be for the latest version of TinyMCE (and it is updated recently).</p> <p><a href="https://www.gavick.com/blog/wordpress-tinymce-custom-buttons" rel="nofollow noreferrer">https://www.gavick.com/blog/wordpress-tinymce-custom-buttons</a></p> <p>The tutorial you linked is probably for the TinyMCE that was in WordPress prior to 3.9.</p> <p>Edit: Did a quick test. Seems to be working. :)</p> <p><img src="https://i.stack.imgur.com/axm32.jpg" alt=""></p> <hr> <p>A quick guide to get it working:</p> <ol> <li>Open <a href="https://www.gavick.com/blog/wordpress-tinymce-custom-buttons#tmce-section-1" rel="nofollow noreferrer">https://www.gavick.com/blog/wordpress-tinymce-custom-buttons#tmce-section-1</a></li> <li>Paste the four codes of php in your functions.php file</li> <li>Replace <code>plugins_url( '/text-button.js', __FILE__ );</code> with <code>get_bloginfo('stylesheet_directory') . /text-button.js</code> (might need adjusting if the file is in a subdirectory).</li> <li>Paste the javascript code from the fifth block in the javascript file you created.</li> </ol> <p>(note this is just a quick example for implementing it in a <strong>theme</strong> so you can get the main idea, if you are actually building a plugin, you should use the <code>plugins_url( '/text-button.js', __FILE__ )</code> syntax).</p> <p><a href="http://codex.wordpress.org/Function_Reference/plugins_url" rel="nofollow noreferrer">http://codex.wordpress.org/Function_Reference/plugins_url</a></p>