WordPress editor style

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

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:

  1. Start by creating a file called editor-style.css in your WordPress theme’s root directory.
  2. 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();.
  3. 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 body in your editor-style.css file.
  4. 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.
  5. Don’t forget to add the image styles like .alignleft, .alignright and .aligncenter as well as blockquote etc.
Once you’ve created your WordPress editor style CSS, start writing a new post and you’ll love how you can now enjoy the visual editor even more.

Tags:


Yoast.com runs on the Genesis Framework

Genesis theme frameworkThe Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Whether you're a novice or advanced developer, Genesis provides you with the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Read our Genesis review or get Genesis now!

25 Responses

  1. BjornBy Bjorn on 25 May, 2011

    Your link to: http://yoast.com/article/wordpress-hosting/ is not working.

  2. EricBy Eric on 25 May, 2011

    You have a 404 on your “WordPress hosting” link :P

    • Joost de ValkBy Joost de Valk on 25 May, 2011

      As mentioned above, fixed it :)

      • BrianBy Brian on 25 May, 2011

        Nope, still doesn’t work.

        • Joost de ValkBy Joost de Valk on 26 May, 2011

          Must have been cache that didn’t update properly, it should really work :)

  3. Abhijeet MukherjeeBy Abhijeet Mukherjee on 25 May, 2011

    Wow, so this makes it exactly the same WYSIWYG interface like what Windows Live Writer offers?

    • Joost de ValkBy Joost de Valk on 25 May, 2011

      Yes, it does.

    • M.K. SafiBy M.K. Safi on 26 May, 2011

      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.

  4. PaulBy Paul on 25 May, 2011

    I only wish I knew what all this meant and how it would benefit me! All say ahhhhh!

    • Adam W. WarnerBy Adam W. Warner on 26 May, 2011

      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!

  5. EdBy Ed on 25 May, 2011

    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.

  6. TessaBy Tessa on 25 May, 2011

    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

    • Joost de ValkBy Joost de Valk on 25 May, 2011

      Yeah depending on your theme, that might not work at all, but if it works, I’m fine :)

  7. TessaBy Tessa on 25 May, 2011

    Seemed to work for me…!

  8. ChristophBy Christoph on 25 May, 2011

    Great – just tried it. Will surely use it on my next projects. Thanks from Austria!

  9. Rev. VoodooBy Rev. Voodoo on 25 May, 2011

    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…..

  10. stephanie walterBy stephanie walter on 26 May, 2011

    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.

  11. dalibor_rodenBy dalibor_roden on 26 May, 2011

    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?

    • Joost de ValkBy Joost de Valk on 26 May, 2011

      Nope, it’s crap. You’ll have to code.

  12. Sharon JBy Sharon J on 26 May, 2011

    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.

    • Joost de ValkBy Joost de Valk on 26 May, 2011

      I think you should once you realize the quality of the output is quite low.

  13. Joseph DowdyBy Joseph Dowdy on 13 June, 2011

    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.

Trackbacks

  1. [...] WordPress editor style – Yoast (yoast.com) // ShareHacker NewsBufferShareEmailPrintDiggReddit Filed Under: Blog Stuff Tagged With: WordPress About JamesJames is the Founder and Chief Technologist of HicksNewMedia, a technology consulting and digital publishing firm providing effective and relevant solutions to individuals and businesses looking to utilize all things on the interweb. Follow him on Twitter | Profile Page | Facebook [...]