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!).

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;
}
Jitendra Vaswani

Jitendra Vaswani is the founder of SchemaNinja WordPress Plugin, prior to SchemaNinja he is the founder of many internet marketing blogs BloggersIdeas.com Designskew.com, Crazythemes.com Need4hosting.info, Digiexe.com, Oldgeekjobs.com, . He is successful online marketer & award winning digital marketing consultant. He has been featured on HuffingtonPost, BusinessWorld, YourStory, Payoneer, Lifehacker & other leading publication as a successful blogger & digital marketer. Jitendra Vaswani is also a frequent speaker & having 5+ yrs experience of in Digital Marketing field. Check out his portfolio( jitendra.co). Find him on Google+, Twitter, & Facebook.

Jitendra Vaswani

Jitendra Vaswani is the founder of SchemaNinja WordPress Plugin, prior to SchemaNinja he is the founder of many internet marketing blogs BloggersIdeas.com Designskew.com, Crazythemes.com Need4hosting.info, Digiexe.com, Oldgeekjobs.com, . He is successful online marketer & award winning digital marketing consultant. He has been featured on HuffingtonPost, BusinessWorld, YourStory, Payoneer, Lifehacker & other leading publication as a successful blogger & digital marketer. Jitendra Vaswani is also a frequent speaker & having 5+ yrs experience of in Digital Marketing field. Check out his portfolio( jitendra.co). Find him on Google+, Twitter, & Facebook.

Leave a Comment

This site will soon be redirected to Imagestation.com