Use Custom Stylesheet for WordPress Editor

You can use custom stylesheet for WordPress’s TinyMCE visual editor too. You can overwrite the default WordPress Editor CSS with your custom CSS. This will help you add desired font styles and font sizes to WordPress Editor. Let’s see how to do it.

It is not an advanced trick, its the easy one. And if you are not getting the most out of your WordPress Editor, you can use Custom Stylesheet for styling WordPress editor as per your desire.

This trick works if you are doing this taking your theme as a base, if you want to make a specific plugin for that, you need to see this for filtering.

What you need to do is, first add a file name editor_css.css in your WordPress theme’s top level so that your_theme/editor_css.css is accessible.

Now, put all the CSS you want to add to style your WordPress editor in this CSS file. This stylesheet file would act as the CSS which will overwrite the be default WordPress editor CSS.

Now, open up your theme’s functions.php file and add this filter action.

add_editor_style('editor_css.css');

Just save everything, and check it out yourself. You will see the changes according to the changes you made in your editor_css.css file. Following is an example of CSS you may use in the stylesheet file.

body#tinymce.wp-editor {
    font-family: Arial, Helvetica, sans-serif;
    margin:10px;
}

body#tinymce.wp-editor a {
    color: #4CA6CF;
}