{"id":83538,"date":"2012-06-28T12:00:23","date_gmt":"2012-06-28T16:00:23","guid":{"rendered":"http:\/\/wpmu.org\/?p=83538"},"modified":"2012-06-27T15:14:07","modified_gmt":"2012-06-27T19:14:07","slug":"wordpress-editor-stylesheet","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/wordpress-editor-stylesheet\/","title":{"rendered":"Improve WordPress Visual Editor for any theme with Editor Stylesheets"},"content":{"rendered":"

What good is a WYSIWYG editing interface<\/a> if it fails to show what your marked-up content really looks like? Many themes do not make use of editor styles, even though they\u2019ve been available since WordPress version 3. Let\u2019s cover how to:<\/p>\n

    \n
  1. Enable editor style sheets in your theme.<\/li>\n
  2. Tell your theme to acknowledge the editor style sheet.<\/li>\n
  3. Then port over your theme\u2019s post CSS to make your editing screen snazzy (and correct.)<\/li>\n<\/ol>\n

    Editor stylesheets: an egg is an egg<\/h2>\n

    Editor stylesheets allow the Edit Post screen’s content area to use special styles for the WYSIWYG editor. By building a correct stylesheet based on a WordPress theme’s main stylesheet, the editor can show exactly what different elements will look like on the published page.<\/p>\n

    Been there, done that<\/h2>\n

    Hacks for properly styling the edit screen’s content have been around for some time. WordPress version 3 brought the \u201cadd_editor_style<\/a>\u201d functionality to make it even easier. Despite all this, many otherwise wonderful themes still leave content in the editor window styled with WordPress defaults.<\/p>\n\n

    Examples of themes with and without support.<\/h2>\n

    The 2011 theme<\/a> that ships with WordPress supports editor stylesheets. Compare the editor content area with the same content in the published page. Pretty neat!<\/p>\n

    The \u201ctypebased\u201d theme\u2014a great looking free theme\u2014does not support editor stylesheets. Again, compare the editor and published page screen.<\/p>\n

    How to add editor stylesheets to any theme<\/h2>\n

    With a little work, you can add editor stylesheets to any WordPress theme. Some themes may be more difficult than others\u2014based on the CSS file’s quality\u2014but the process is always the same.<\/p>\n

    Watch the video below to see this process, every step of the way. If you prefer text, you can find it below.<\/p>\n

    fNgjvtr4Rk4<\/span><\/span><\/p>\n\n

    Step-by-step instructions:<\/h3>\n
      \n
    1. Add a new file called \u201ceditor-style.css\u201d to the theme directory.<\/li>\n
    2. In the theme’s \u201cfunctions.php\u201d file, add \u201cadd_editor_style();\u201d line so WordPress will look for that new stylesheet you just made when using the editor.<\/li>\n
    3. Prepare a sample post that contains all the elements you need to style. I recommend your post contain the following elements:\n
        \n
      1. p<\/li>\n
      2. strong text in a paragraph<\/li>\n
      3. emphasis text in a paragraph<\/li>\n
      4. h1, h2, h3<\/li>\n
      5. h4 \u2026 h6 if applicable to your theme<\/li>\n
      6. ul with 3 list items<\/li>\n
      7. ol with 3 list items<\/li>\n
      8. blockquote<\/li>\n
      9. some linked text<\/li>\n
      10. An image with no alignment.<\/li>\n
      11. An image right aligned.<\/li>\n
      12. An image left aligned.<\/li>\n
      13. \u2026depending on your theme, you may need others<\/li>\n<\/ol>\n<\/li>\n
      14. Add global CSS rules from your main style.css to the editor-style.css. By \u201cglobal CSS,\u201d I mean rules for basic HTML tags such as body, p, h1, h2, ul, li, etc.<\/li>\n
      15. Add any direct rules for .alignleft, .alignright, and .aligncenter. These are for images, and I mention them because they are often overlooked, and sometimes not near the top of CSS files by the basic HTML tags.<\/li>\n
      16. View you published page and use Firebug<\/a>, Chrome developer tools, or whatever you like for checking the HTML \/ CSS in your browser. (The following video uses FireBug for the FireFox browser.)<\/li>\n
      17. Using Firebug’s element selector, click on the first HTML element in the page’s content to check the style rules assigned to it.<\/li>\n
      18. Firebug’s CSS pane will show specific styles at the top, and move down to more general styles. The \u201cglobal CSS rules\u201d we added in step 4 above will show at the bottom of this pane.<\/li>\n
      19. Add any specific styles found in the live page to the corresponding generic styles in your editor-style.css file.\n
          \n
        1. Example 1:<\/strong>\n
            \n
          1. \u201c.post-content h2 {font-color:#eee;}\u201d discovered using Firebug on the live page.<\/li>\n
          2. \u201cfont-color:#eee;\u201d needs added to the h2 rules in the editor stylesheet.<\/li>\n<\/ol>\n<\/li>\n
          3. Example 2:<\/strong>\n
              \n
            1. \u201cimg.alignright {margin:3px 0 2px 10px;}\u201d discovered using Firebug on the live page.<\/li>\n
            2. \u201cmargin:3px 0 2px 10px;\u201d needs added to an img.alignright rule in the editor stylesheet.<\/li>\n
            3. Since there is a specific rule for img.alignright, you should also add and test a left-aligned image.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n
            4. Check the edit screen for the test page. While you will probably see your styles coming through, you might also notice some of the global CSS rules are inappropriate.\n
                \n
              1. Example:<\/strong> With typebased, we had a background-color on the body element, but we did not want this on our post-containing element. We simply remove that background color from the body element in our editor CSS file.<\/li>\n<\/ol>\n<\/li>\n
              2. NOTE that if your site uses plugins that add their own CSS, and it affects items you would add and see in your editor, you need to add those CSS rules to editor-style.css as well. Firebug should still show you these rules, unless they are dynamically added via JavaScript.<\/li>\n
              3. CUFON and other font replacements are not practical to implement in the WYSIWYG editor.<\/li>\n<\/ol>\n

                 <\/p>\n\n

                Credits<\/h2>\n