Welcome to Findnerd. We are going to discuss the steps to create new buttons and show the hidden buttons of editor. We all know that wordpress bydefault using editor TinyMCE. There are many hidden options/button available in the editor so you can simply show the hidden buttons by using the filter named mce_buttons_3. Here 3 notating the row number in the editor. With above filter button will be shown in third row. You can also use the filter mce_buttons_2 in the same way. Let take an example to enable the hidden buttons.

function newOpt(buttons){
    buttons[]='fontselect';
    buttons[]='copy';
    buttons[]='cut';
    buttons[]='paste';
    return $buttons;
}
add_filter('mce_buttons_3','newOpt');

In above example we simply enabled the buttons such as copy,cut,paste and fontselect. Now we are going to explain the steps to create a new button in editor.

We are going to add new button which is useful to set the font size to 30px. First of all you need to create a new folder named editor-new-opt and then create a new file named lettersize.js.

add_action( 'init', 'findnerd_new_buttons' );
function findnerd_new_buttons() {
    add_filter( "mce_external_plugins", "findnerd_add_buttons" );
    add_filter( 'mce_buttons', 'findnerd_register_buttons' );
}
function findnerd_add_buttons( $plugin_array ) {
    $plugin_array['findnerd'] = get_template_directory_uri() . '/editor-new-opt/lettersize.js';
    return $plugin_array;
}
function findnerd_register_buttons( $buttons ) {
    array_push( $buttons, 'fontbar'); 
    return $buttons;
}

(function() { tinymce.create('tinymce.plugins.Findnerd', { /** * Initializes the plugin, this will be executed after the plugin has been created. * This call is done before the editor instance has finished it's initialization so use the onInit event * of the editor instance to intercept that event. * * @param {tinymce.Editor} ed Editor instance that the plugin is initialized in. * @param {string} url Absolute URL to where the plugin is located. */ init : function(ed, url) {

    },

    /**
     * Creates control instances based in the incomming name. This method is normally not
     * needed since the addButton method of the tinymce.Editor class is a more easy way of adding buttons
     * but you sometimes need to create more complex controls like listboxes, split buttons etc then this
     * method can be used to create those.
     *
     * @param {String} n Name of the control to create.
     * @param {tinymce.ControlManager} cm Control manager to use inorder to create new control.
     * @return {tinymce.ui.Control} New control instance or null if no control was created.
     */
    createControl : function(n, cm) {
        return null;
    },

    /**
     * Returns information about the plugin as a name/value array.
     * The current keys are longname, author, authorurl, infourl and version.
     *
     * @return {Object} Name/value array containing information about the plugin.
     */
    getInfo : function() {
        return {
            longname : 'findnerd Buttons',
            author : 'deepak',
            authorurl : 'http://findbnerd.com',
            infourl : 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/example',
            version : "0.1"
        };
    }
});


// Register plugin
tinymce.PluginManager.add( 'findnerd', tinymce.plugins.Findnerd );

In above script we can simply start the script to add the button in editor using init function.

    (function() {
    tinymce.create('tinymce.plugins.Findnerd', {
        init : function(ed, url) {
            ed.addButton('fontbar', {
                title : 'fontbar',
                cmd : 'fontbar',
                image : url + '/fontbar.jpg'
            });

        },
        ed.addCommand('fontbar', function() {
                var selected_text = ed.selection.getContent();
                var return_text = '';
                return_text = '<span class="fontbar">' + selected&#95;text + '</span>';
                ed.execCommand('mceInsertContent', 0, return_text);
            });
    });
    // Register plugin
    tinymce.PluginManager.add( 'findnerd', tinymce.plugins.Findnerd );
})();

You have registered the button as well as set the command for the button. we added command which will add the span to the selected div and we implemented the css for the span in style.css

.fontbar {
    font-size: 30px;
    padding-right: 3px;
    line-height: 34px;
}

So these are the steps to create a new button in wordress editor. You can simply add more buttons by following the above steps.