tiny_mce_before_init preventing custom shortcode icon appearing

Question

I'm using the following to trim the TinyMCE editor

// Restrict buttons on the rich text editor
function formatTinyMCE($in)
{
    $in['remove_linebreaks']            = false;
    $in['gecko_spellcheck']             = false;
    $in['keep_styles']                  = true;
    $in['accessibility_focus']          = true;
    $in['tabfocus_elements']            = 'major-publishing-actions';
    $in['media_strict']                 = true;
    $in['paste_remove_styles']          = true;
    $in['paste_remove_spans']           = true;
    $in['paste_strip_class_attributes'] = 'none';
    $in['paste_text_use_dialog']        = true;
    $in['wpeditimage_disable_captions'] = true;
    $in['plugins']                      = 'inlinepopups,tabfocus,paste,media,wordpress,wpeditimage,wpgallery,wplink,wpdialogs,infographic';
    $in['content_css']                  = get_template_directory_uri() . "/editor-style.css";
    $in['wpautop']                      = true;
    $in['apply_source_formatting']      = false;
    $in['theme_advanced_blockformats']  = 'p,h3';
    $in['theme_advanced_buttons1']      = 'formatselect,|,bold,italic,blockquote,|,link,unlink,|,bullist,numlist,infographic|,wp_fullscreen,wp_adv';
    $in['theme_advanced_buttons2']      = 'pastetext,pasteword,removeformat,|,undo,redo';
    $in['theme_advanced_buttons3']      = '';
    $in['theme_advanced_buttons4']      = '';
    return $in;
}
add_filter('tiny_mce_before_init', 'formatTinyMCE' );

I then have a plugin to create an extra shortcode button:

function fetchInfographic() {  
    return 'HERE BE THE INFOGRAPHIC';  
}
add_shortcode('infographic', 'fetchInfographic');

function addButton() {  
    if(current_user_can('edit_posts') &&  current_user_can('edit_pages'))  
    {  
        add_filter('mce_external_plugins', 'addPlugin');  
        add_filter('mce_buttons', 'registerButton');  
    }  
}  
add_action('init', 'addButton');

function registerButton($buttons) {  
    array_push($buttons, "infographic"); 
    return $buttons;  
}  

function addPlugin($pluginArray) {  
    $pluginArray['infographic'] = plugins_url('infographic_plugin.js', __FILE__); 
    return $pluginArray; 
}  

(infographic_plugin.js)

(function() {  
    tinymce.create('tinymce.plugins.infographic', {  
        init : function(ed, url) {  
            console.log('url');
            ed.addButton('infographic', {  
                title : 'Add an infographic',  
                image : url+'/dashboard.png',  
                onclick : function() {  
                     ed.selection.setContent('[infographic]');  

                }  
            });  
        },  
        createControl : function(n, cm) {  
            return null;  
        },  
    });  
    tinymce.PluginManager.add('infographic', tinymce.plugins.infographic);  
})();  

This works great if I remove the formatTinyMCE function, however with it, the button just doesn't appear. As you can see by the function I've tried adding "infographic" to $in['plugins'] and $in['theme_advanced_buttons1'] but it has no effect.

Answer 1

I was able to resolve this by moving 'infographic' to the front of the list in the $in['plugins'] string