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:
WordPress hosting article with WordPress editor style
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:
add_editor_style();. - 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
.alignleft,.alignrightand.aligncenteras well asblockquoteetc.
Your link to: http://yoast.com/article/wordpress-hosting/ is not working.
Ugh fixed. Thanks.
You have a 404 on your “WordPress hosting” link :P
As mentioned above, fixed it :)
Nope, still doesn’t work.
Must have been cache that didn’t update properly, it should really work :)
Wow, so this makes it exactly the same WYSIWYG interface like what Windows Live Writer offers?
Yes, it does.
No, not exactly like WLW. WLW will show the template of your blog including graphics and everything. Editor style just mirrors the fonts, font sizes, width of the template container, and some other things.
I only wish I knew what all this meant and how it would benefit me! All say ahhhhh!
Paul, this might help:)
It’s a beautiful thing and has really sped up my content writing. In a nutshell, what you see when you type while creating a page or post is what you see on the frontend of your site.
No more previewing posts to make sure the lines breaks are where you want them!
Wow now I feel a nerd knowing that I had been using this for the past month and Joost was not :).
I saw it somewhere else, and I love this little feature. It’s true little gems like this which make WordPress such a powerful platform to build successful websites.
This is incredible! Thanks so much for this tip.
To save time, I just duplicated my entire style.css file and renamed it editor-style.css. Is there a downside to doing this?
Thanks
Tessa
Yeah depending on your theme, that might not work at all, but if it works, I’m fine :)
Seemed to work for me…!
Great – just tried it. Will surely use it on my next projects. Thanks from Austria!
You know, for me it is straight up laziness. I have a twentyten child theme on VoodooPress. I changed the post area (in terms of width and fonts) just enough that the existing editor style no longer matches. I documented all my css changes I made to twentyten. I’ve just been too lazy to adjust my editor sheet. Same thing on my personal blog. It’s a custom jobbie, and I’ve been too lazy to make the editor sheet. Hopefully your post shames me into getting the darned editor styles in place…. soon…..
I’ve been a wordpress user for 4 years and I only discovered this 3 weeks ago ^^
It’s indeed very usefull if you use lots of images, you see exactly where they will be in the design using the .alignleft etc styles.
Hi Joost de Valk. Thnaks for the post. Seems to be classy stuff. Any ideas how to convert psd files to wordpress without coding? I know there are PS plugins, but are they functional enough?
Nope, it’s crap. You’ll have to code.
This is still going to extraordinary lengths, when all you have to do is to use the theme Atahualpa. It has 300 different settings you can tweak if you want to everything from column numbers, widget borders, H1, H2, H3 tag sizes and colours, link sizes and colours, menus and menu placement. All under Atahualpa Theme Options. There is a huge on-line forum which will answer any of your questions. I would not willingly use any other theme.
I think you should once you realize the quality of the output is quite low.
For those of us who get headaches from CSS, it’d be great if this was a plugin with a WYSIWYG interface for testing of the style. I’d pay for that plugin.