Use Custom Stylesheet for WordPress Editor

Affiliate disclosure: In full transparency – some of the links on our website are affiliate links, if you use them to make a purchase we will earn a commission at no additional cost for you (none whatsoever!).

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.

Custom CSS for WordPress Editor

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;
}
DesignSkew Editorial Team

We have a team of experts in graphics related stuff, who bought this article up-to you.

Leave a Comment