Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

Thanks!

share|improve this question
    
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 at 6:07

1 Answer 1

up vote 1 down vote accepted

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
        wp_enqueue_style('my_tinymce_button_css');

        // Depending on when you fire things, you may/may not need to enqueue 'dashicons'
        wp_enqueue_style('dashicons');
    }
}
share|improve this answer
    
Hey thanks for your help, but $screen->parent_base == null. Any ideas? –  McShaman Mar 25 at 10:21
    
Maybe $screen->base == 'post'? –  McShaman Mar 25 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 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 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 at 0:00

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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