Using WordPress ‘mce_css’ PHP filter

The mce_css WordPress PHP filter allows you to modify the comma-delimited list of stylesheets that are loaded in the TinyMCE editor.

Usage

add_filter('mce_css', 'my_custom_editor_styles');
function my_custom_editor_styles($stylesheets) {
    // your custom code here
    return $stylesheets;
}

Parameters

  • $stylesheets (string): A comma-delimited list of stylesheets to load in the TinyMCE editor.

More information

See WordPress Developer Resources: mce_css

Examples

Add a custom stylesheet to the editor

Add a new stylesheet to the TinyMCE editor.

add_filter('mce_css', 'add_custom_editor_stylesheet');
function add_custom_editor_stylesheet($stylesheets) {
    $my_custom_stylesheet = get_stylesheet_directory_uri() . '/my-custom-editor-style.css';
    $stylesheets .= ',' . $my_custom_stylesheet;
    return $stylesheets;
}

Remove a specific stylesheet from the editor

Remove a specific stylesheet from the TinyMCE editor.

add_filter('mce_css', 'remove_specific_editor_stylesheet');
function remove_specific_editor_stylesheet($stylesheets) {
    $stylesheets_to_remove = 'stylesheet-to-remove.css';
    $stylesheets = str_replace($stylesheets_to_remove . ',', '', $stylesheets);
    return $stylesheets;
}

Replace a stylesheet in the editor

Replace an existing stylesheet with a new one in the TinyMCE editor.

add_filter('mce_css', 'replace_editor_stylesheet');
function replace_editor_stylesheet($stylesheets) {
    $old_stylesheet = 'old-stylesheet.css';
    $new_stylesheet = get_stylesheet_directory_uri() . '/new-stylesheet.css';
    $stylesheets = str_replace($old_stylesheet, $new_stylesheet, $stylesheets);
    return $stylesheets;
}

Clear all stylesheets in the editor

Remove all stylesheets from the TinyMCE editor.

add_filter('mce_css', 'clear_editor_stylesheets');
function clear_editor_stylesheets($stylesheets) {
    return '';
}

Conditionally load a stylesheet in the editor

Load a specific stylesheet in the TinyMCE editor based on a condition (e.g., user role).

add_filter('mce_css', 'conditionally_load_editor_stylesheet');
function conditionally_load_editor_stylesheet($stylesheets) {
    if (current_user_can('editor')) {
        $editor_stylesheet = get_stylesheet_directory_uri() . '/editor-stylesheet.css';
        $stylesheets .= ',' . $editor_stylesheet;
    }
    return $stylesheets;
}