I’m writing this with a WordPress editor style CSS active, for the first time. This feature has been available in WordPress since WordPress 3.0 but I had not used it until now, which is nothing but stupid. A WordPress editor style makes the TinyMCE editor used in visual editing mode look like your theme, using the font, color, width etc. This allows for even better formatting of your text while you’re writing it.
Check out what my WordPress hosting article looks like in my visual editor now that I have an editor stylesheet active, for instance:
This makes it easier for editors to write content in such a way that it fits neatly on the page.
Creating a WordPress editor style CSS file
Creating a WordPress editor style CSS file is a pretty easy process, just follow these steps:
- Start by creating a file called editor-style.css in your WordPress theme’s root directory.
- Open up your theme’s functions.php file and add the following line of code in the setup code, or just at the top:
- Now start editing your newly created editor CSS file. Port over the CSS from your theme’s style.css that affects the styling of everything in your post’s body. Be sure to assign the width, text color, background color etc. of the content part of your theme to the
bodyin your editor-style.css file.
- If it’s not working as you expected, check the editor-style.css file from TwentyTen or TwentyEleven and see how they apply the several styles.
- Don’t forget to add the image styles like
.aligncenteras well as