WordPress hosting article with WordPress editor style

WordPress editor style

WordPress editor style

May 25th, 2011 – 25 Comments

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.

25 Responses to WordPress editor style

  1. Joseph Dowdy
    By 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.

  2. Sharon J
    By 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 Valk
      By Joost de Valk on 26 May, 2011

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

  3. dalibor_roden
    By 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 Valk
      By Joost de Valk on 26 May, 2011

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

  4. stephanie walter
    By 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.

  5. Rev. Voodoo
    By 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…..

  6. Christoph
    By Christoph on 25 May, 2011

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

  7. Tessa
    By Tessa on 25 May, 2011

    Seemed to work for me…!

  8. Tessa
    By 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 Valk
      By 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 :)

  9. Ed
    By 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.

  10. Paul
    By 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. Warner
      By 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!

  11. Abhijeet Mukherjee
    By Abhijeet Mukherjee on 25 May, 2011

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

    • M.K. Safi
      By 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.

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

      Yes, it does.

  12. Eric
    By Eric on 25 May, 2011

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

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

      As mentioned above, fixed it :)

      • Brian
        By Brian on 25 May, 2011

        Nope, still doesn’t work.

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

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

  13. Bjorn
    By Bjorn on 25 May, 2011

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


Check out our must read articles about Analytics