Using WordPress ‘editor_stylesheets’ PHP filter

by

The editor_stylesheets WordPress PHP filter allows you to modify the array of URLs of stylesheets applied to the editor.

Usage

add_filter( 'editor_stylesheets', 'your_custom_function' );

function your_custom_function( $stylesheets ) {
    // your custom code here
    return $stylesheets;
}

Parameters

  • $stylesheets (string[]): Array of URLs of stylesheets to be applied to the editor.

More information

See WordPress Developer Resources: editor_stylesheets

Examples

Add a Custom Stylesheet to the Editor

To add a custom stylesheet to the editor:

add_filter( 'editor_stylesheets', 'add_custom_stylesheet' );

function add_custom_stylesheet( $stylesheets ) {
    $stylesheets[] = 'https://example.com/path/to/your/custom-stylesheet.css';
    return $stylesheets;
}

Remove a Specific Stylesheet from the Editor

To remove a specific stylesheet from the editor:

add_filter( 'editor_stylesheets', 'remove_specific_stylesheet' );

function remove_specific_stylesheet( $stylesheets ) {
    $stylesheet_to_remove = 'https://example.com/path/to/stylesheet-to-remove.css';
    $key = array_search( $stylesheet_to_remove, $stylesheets );
    if ( false !== $key ) {
        unset( $stylesheets[ $key ] );
    }
    return $stylesheets;
}

Replace a Stylesheet in the Editor

To replace a stylesheet in the editor with another:

add_filter( 'editor_stylesheets', 'replace_stylesheet' );

function replace_stylesheet( $stylesheets ) {
    $stylesheet_to_replace = 'https://example.com/path/to/old-stylesheet.css';
    $new_stylesheet = 'https://example.com/path/to/new-stylesheet.css';
    $key = array_search( $stylesheet_to_replace, $stylesheets );
    if ( false !== $key ) {
        $stylesheets[ $key ] = $new_stylesheet;
    }
    return $stylesheets;
}

Remove All Stylesheets from the Editor

To remove all stylesheets from the editor:

add_filter( 'editor_stylesheets', 'remove_all_stylesheets' );

function remove_all_stylesheets( $stylesheets ) {
    return array();
}

Apply Stylesheets Conditionally

To apply stylesheets conditionally, based on the user role:

add_filter( 'editor_stylesheets', 'apply_stylesheets_conditionally' );

function apply_stylesheets_conditionally( $stylesheets ) {
    if ( current_user_can( 'editor' ) ) {
        $stylesheets[] = 'https://example.com/path/to/editor-stylesheet.css';
    } elseif ( current_user_can( 'author' ) ) {
        $stylesheets[] = 'https://example.com/path/to/author-stylesheet.css';
    }
    return $stylesheets;
}