How To Add Custom Styles To WordPress Visual Editor

WordPress allows theme developers to add their custom styles to WordPress editor. WordPress uses TinyMCE as their visual editor. You can easily link to your custom stylesheet by adding following code to your functions.php file:

function my_theme_add_editor_styles() {
    add_editor_style( 'custom-editor-style.css' );
}
add_action( 'init', 'my_theme_add_editor_styles' );

Any CSS added to custom-editor-style.css file will be reflected within the WordPress’ visual editor.

Using Google Fonts

You can also use Google Fonts API to use Google Fonts on WordPress’ visual editor by adding following to your functions.php file:

function my_theme_add_editor_styles() {
    $font_url = 'http://fonts.googleapis.com/css?family=Lato:300,400,700';
    add_editor_style( str_replace( ',', '%2C', $font_url ) );
}
add_action( 'init', 'my_theme_add_editor_styles' );

Choosing Styles Based on Post Type

You can also use your custom editor stylesheets on based the post type being edited. Add following code in your functions.php file. This assumes the stylesheets with names in the form of editor-style-{post_type}.css are in your theme directory.

function my_theme_add_editor_styles() {
    global $post;
    $post_type = get_post_type( $post->ID );
    $editor_style = 'editor-style-' . $post_type . '.css';
    add_editor_style( $editor_style );
}
add_action( 'pre_get_posts', 'my_theme_add_editor_styles' );