How to use editor_stylesheets filter in WordPress

editor_stylesheets filter

Filters the array of URLs of stylesheets applied to the editor.

To use editor_stylesheets filter, first you have to register it using add_filter. You can write this code into functions.php of your activated theme or in a custom WordPress Plugin.

We at WePlugins always prefer to create a custom WordPress Plugin while using hooks so nothing breaks when you update your WordPress Theme in the future.

In the below live example, we have defined a function weplugins_modify_editor_stylesheets_defaults which takes 1 parameter and we registered it using add_filter. The first parameter editor_stylesheets is the name of the hook, the second parameter weplugins_modify_editor_stylesheets_defaults is the name of the function which needs to be called, the third parameter is the priority of calling the hook if the same hook is used multiple times, and the last parameter is the number of arguments (if any) to be passed in the registered function.

Sometime, you have to remove a registered hook so you can use remove_filter to remove editor_stylesheets filter.

Parameters

Below the 1 parameter is required to use this hook.

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

Live Example

apply_filters( 'editor_stylesheets', string[] $stylesheets )

Below is an example how you can use this hook.

    function weplugins_modify_editor_stylesheets_defaults($stylesheets) { 
        // Update the $stylesheets variable according to your website requirements and return this variable. You can modify the $stylesheets variable conditionally too if you want.
        return $stylesheets; 
    }
    // add the filter
    add_filter( "editor_stylesheets", "weplugins_modify_editor_stylesheets_defaults", 10, 1 );

To remove a hook callback, use the example below.

remove_filter( "editor_stylesheets", "weplugins_modify_editor_stylesheets_defaults", 10, 1 );

Please make sure to provide the same callback function name, priority, and number of arguments while removing the hook callback.

Example 1: Adding a Custom Stylesheet

This example demonstrates how to add a custom stylesheet to the editor.

    function weplugins_add_custom_editor_stylesheet($stylesheets) { 
        $stylesheets[] = get_template_directory_uri() . '/custom-editor-style.css'; 
        return $stylesheets; 
    }
    add_filter( "editor_stylesheets", "weplugins_add_custom_editor_stylesheet", 10, 1 );

Example 2: Adding Multiple Custom Stylesheets

This example shows how to add multiple custom stylesheets to the editor.

    function weplugins_add_multiple_editor_stylesheets($stylesheets) { 
        $stylesheets[] = get_template_directory_uri() . '/custom-editor-style1.css'; 
        $stylesheets[] = get_template_directory_uri() . '/custom-editor-style2.css'; 
        return $stylesheets; 
    }
    add_filter( "editor_stylesheets", "weplugins_add_multiple_editor_stylesheets", 10, 1 );

Example 3: Conditionally Adding a Stylesheet

This example demonstrates how to conditionally add a stylesheet based on the post type.

    function weplugins_conditional_editor_stylesheet($stylesheets) {
        global $post;
        if ( 'custom_post_type' === $post->post_type ) {
            $stylesheets[] = get_template_directory_uri() . '/custom-post-type-editor-style.css';
        }
        return $stylesheets;
    }
    add_filter( "editor_stylesheets", "weplugins_conditional_editor_stylesheet", 10, 1 );

Contact Us

If you need any customization or assistance with this hook, feel free to contact us.