I have created a plugin that adds a new button to the TinyMCE editor in the admin edit pages/posts area. I am trying to apply a font icon to it as per the the other buttons in Wordpress 3.8. I have created a CSS file will the following:

.mce_mybutton::before {
    content: '\f459';

All I need to do is load the CSS when the editor is loaded... Seemed easy.

I tried add_editor_style() but apparently it is only for theme development not plugins

I found the mce_css filter but it didn't work. I think it is for only applying CSS to the content in the editor... Not the buttons.

I read the source code for the edit-from-advanced.php and class-wp-editor.php the files responsible for generating the editor on the admin edit pages/posts. There is a setting within the _WP_Editors object that looked promising:

'editor_css' => '', // intended for extra styles for both visual and Text editors buttons, needs to include the <style> tags, can use "scoped".

However I couldn't find a way to hook into it.

Any help would be appreciated.


  • Take a look at the answer here. I was able to get it working with a script. I'm sure you can do the same with a style. It loads ONLY when tinymce is used. AWESOME!
    – josh
    Apr 2, 2014 at 6:07

1 Answer 1


First, I believe your css should use only one colon:

.mce_mybutton:before {
    content: '\f459';

Now, in order to get the css to the proper place. First, we add an action to admin_print_styles; then we check to see if we are editing a post or page; then we enqueue our stylesheet.

We run the check to see if we are editing, so that we don't enqueue our stylesheet on every admin page. We do this to minimize conflicts with other plugins/themes; and since it makes no common sense to run code on pages where it is not needed.

So... we end up with a function like this:

add_action('admin_print_styles', 'add_my_tinymce_button_css');
function add_my_tinymce_button_css() {

    // Get current screen and determine if we are using the editor
    $screen = get_current_screen();
    // If we are editing (adding new) post or page
    if ( $screen->id == 'page' || $screen->id == 'post' ) {

        // Register our stylesheet
        // Note: The stylesheet resides in our plugin directory/css/admin.css
        // You may change this to suit your preferences
        wp_register_style('my_tinymce_button_css', plugin_dir_url( __FILE__ ) . ('/css/admin.css'), array());

        // Now we enqueue our stylesheet

        // Depending on when you fire things, you may/may not need to enqueue 'dashicons'
  • Hey thanks for your help, but $screen->parent_base == null. Any ideas?
    – McShaman
    Mar 25, 2014 at 10:21
  • Maybe $screen->base == 'post'?
    – McShaman
    Mar 25, 2014 at 12:17
  • You're right. Sorry about that. Shame on me for copying and pasting without testing first ;) My answer has been updated. Thanks!
    – josh
    Mar 25, 2014 at 21:37
  • Thanks Josh. It would be better if there was an option to hook into the editor rather than the pages we know from experience the editor is on. What if Wordpress changes the file name, what if I have editor elsewhere on my site, etc. Oh well maybe in Wordpress 3.9
    – McShaman
    Mar 25, 2014 at 22:34
  • I agree (although doubtful WP will change those names). I started a WP topic Here. We shall see what the experts say :) Thanks for accepting the answer.
    – josh
    Mar 26, 2014 at 0:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.