Can themes style the visual editor?

Posted on by

Short answer: yes. This has been available for quite some time but don’t think I’ve seen themes that do it. Things like typefaces, headings, image padding and borders, etc. can easily be set by the current theme making the visual editor… more WYSIWYG. All it takes is a stylesheet and a small function in the theme’s functions.php file:

add_filter('mce_css', 'my_editor_style');
function my_editor_style($url) {

  if ( !empty($url) )
    $url .= ',';

  // Change the path here if using sub-directory
  $url .= trailingslashit( get_stylesheet_directory_uri() ) . 'editor-style.css';

  return $url;
}

where editor-style.css will be applied to TinyMCE’s iframe.

There is also an option to define CSS classes that can be inserted by the user and to add the “Styles” drop-down selector to the editor toolbar. This is probably most useful for developers when creating a custom theme for a client as these classes would stop working if the theme is changed.

I’ve put together a small package with examples of how to enable this. If you are creating WordPress themes, download it or have a look, it’s quite simple. If not, perhaps ask the author of your theme to add it to the next update. 🙂

Update: as Dion points out in the comments, this is not meant for adding the whole “style.css” to the editor. That could bring problems and most of the styling won’t apply there anyways. It works best when a separate stylesheet is made specifically for use in the editor (editor-style.css in the example). It should contain a small subset from style.css, usually the part that is applied to the actual posts.

69 thoughts on “Can themes style the visual editor?”

    • Ajay, I have an article on how to add Quickedit buttons on my site. I won’t hijack the thread with a link, but you should be able to find it if you look.

      It’s not difficult, but getting it right the first time can be tricky.

  4. This sounds great, but I can’t get it to work in Thesis. Should this work if I add this code to the custom_functions.php file used by thesis? Or is the problem perhaps that I need to change the stylesheet location To reflect the fact that thesis places all the custom files in wp-content/themes/thesis_16/custom/ ?

    I tried this but it didn’t work:
    get_stylesheet_directory_uri.$custom() )

    • Berin: This doesnt work too well if you use the entire stylesheet, The idea is that you would use a smaller subset of your main themes CSS in a different stylesheet specifically for the editor.

  5. Pingback: Andrew: Can themes style the visual editor? - wpparty.com

  6. Amazing how such a small piece of code can be so powerful. I’ve created my fair share of wordpress themes, but I’ve never touched the admin area of WordPress. Maybe this will be the first step?

    thanks…

  7. There is edit toolbar. this is very good and easy There is also an option to define CSS classes that can be inserted by the user and to add the “Styles” drop-down selector

  9. This is great Andrew! In the past I’ve had to say to clients: “This is the way it looks here, but it will look different when it’s actually posted (vastly different)…” I can’t wait to get this going on my custom themes!

  10. Pingback: links for 2010-01-05 | Digital Rehab

  11. Pingback: WordPress Tutorials

  12. Pingback: links for 2010-01-04 « Mark Thomas Gazels websted

  13. Pingback: WordPress Picks for the Week [01/03] | Techtites

  14. Thanks for this!

    Does anyone how to serve up a different stylesheet in tinymce’s fullscreen mode? The fullscreen iframe’s id is mce_fullscreen_ifr, but since the stylesheet’s loaded *inside* the iframe, I can’t distinguish between the two in the stylesheet itself.

  15. This is so awesome. I hate having to tell clients, no it wont look like that when you publish. It doesnt make any sense… what a great fix. It works great, and I haven’t even tried the kit files yet (just tested the function to start with)

    Question. Would a horizontal rule tag work in the kit?

  16. Pingback: WYSIWYRG | 2010 Theme Development

  18. Pingback:   Tip: Make your theme WYSIWYRG compatible by Free WordPress Themes Blog

  19. Pingback: Today in WordPress world – 10/02 | Links | WereWP

  20. Pingback: De WYSIWYG editor bij je theme laten passen | Hiranthi's weblog - Weblog van een ondernemende vrouw

  23. I got this to work with the editor which was awesome! But I notice that when I use the search pages feature in the pages section, I get this error code:

    Warning: Cannot modify header information – headers already sent by (output started at F:\XAMPP\xampp\htdocs\wp-content\themes\accelera\functions.php:515) in F:\XAMPP\xampp\htdocs\wp-includes\pluggable.php on line 868

    When I remove the function from functions.php I am able to do the pages search without issue. Is there a fix or can you explain what I’m doing wrong?

  25. This is great Andrew! In the past I’ve had to say to clients: “This is the way it looks here, but it will look different when it’s actually posted (vastly different)…” I can’t wait to get this going on my custom themes!

  26. Pingback: Twenty Ten: The New and Improved Default WordPress Theme | BloggingPro

  27. Pingback: 8 useful code snippets to get started with WordPress 3.0

  28. Pingback: 8 useful code snippets for WordPress 3.0 | 610 Design

  29. Pingback: Editor “totalmente” WYSIWYG | Ayuda WordPress

  30. Pingback: Editor “totalmente” WYSIWYG | Ajuda Wordpress em Português

  31. Pingback: 8 Useful Code Snippets To Get Started With WordPress 3.0 | WPGrind.com

  32. Pingback: WYSIWYRG | West of the Eastern Shore

  33. I wish this were simple enough for a common user of 1 year like me – I used Redoable Lite and, of course, the visual editor bears almost no resemblance to what Preview shows if you include images, say.

    I hope someone can translate this into simple enough language for someone who’s never touched a style sheet, never written a line of php, never defined a CSS class. Needs to be a path for us who’ve not done these things to get to a nearly WYSIWYG visual editor.

    Is it a goal to have every theme “nearly WYSIWYG” b/c the way it is now is very, very frustrating as I constantly go between preview and edit.

    • I’m sure there will be a plug-in for this shortly to ease the pain of activating it, but there will always be the need to separate your CSS correctly so that you do not completely reload the entire site’s CSS into the editor iframe. Ideally, so that the DRY (Don’t Repeat Yourself) principle is maintained, the CSS that relates to posts should be separated out into a separate style sheet so that it can be targeted by my_editor_style hook and then to not repeat those CSS rules within styles.css, use the @import CSS declaration to import those post-specific styles into the main theme stylesheet.

  34. Pingback: Wordpress 3.0 Insight – main features and settings

  35. Pingback: 主题功能扩展：自定义 WordPress 默认编辑器样式 | Dreamcolor's Cote

  36. Pingback: WordPress | Slovensko » TwentyTen: Nový a vylepšený základný vzhľad WordPress

  37. Pingback: Completo editor visual en Wordpress | Dinero 2.0

  38. Pingback: Feed-Syndicate » Blog Archive » 8 useful code snippets to get started with WordPress 3.0

  40. Pingback: 覚え書き Wordpress3.0 新機能 « SIDE_FLIP blog

  41. Pingback: Wordpress 3.0 en español | Blog TenTuLogo

  42. Pingback: Why Your Visual Editor Width is Different in WordPress 3.0WP Modder | WP Modder

  43. Hi, a question a bit out of topic, but I can’t find a solution to it.

    I use your wp-plugin Top Comments and can’t seem to find a way to clear the votes in the widget. Have cleaned the database but no success?

    The votes don’t disappear when i trash the comments.

  44. Pingback: 8 useful code snippets to get started with WordPress 3.0 | Faredigitale

  45. This is great but there’s one further step I’d like to take – I’m sure it must be simple but I can’t quite work it out!

    My page space is limited to 664px wide and a lot of the layouts rely on that measurement to make sense.

    Is there a way of forcing the TinyMCE editor window to this width?

  46. Pingback: Twenty Ten, a New Default Theme for WordPress — ForSite Media

  47. Pingback: Осваиваем новые функции WordPress 3.0 « defreshen

  48. Pingback: Меняем вид редактора WYSIWYG с помощью CSS | WebteamDesign.ru

  49. I really like this idea, but I can’t seem to get it to work. Running WP 3.0. I’ve added the code to functions.php and I’ve added a reduced stylesheet to the same folder as the original stylesheet, but it doesn’t seem to have any effect on the editor. How could I troubleshoot to make sure that the new ‘editor-style’ is being found?

  50. After edits and uploading, I sparingly snipped barebones css from my styles.css into editor-style.css. I began with font, font-size, content width, borders and background to help visualize layout. Very exciting. Kudos to the WordPress team. But I think there’s work ahead.

    I found that TinyMCE did not precisely mirror published styles. For example, small differences in width, margin, padding, line-height and other settings significantly threw off line breaks. Good, but not a 1-by-1 match. Later I noticed image floats had broken wraps, including RSS alignment, and had failed in the editor too. There’s lots of tweaking ahead for me. Bugs ahoy!

  51. Wow! Must really try this one. This means no more constantly clicking “Preview” to check how your post’s elements are aligning.

  53. Pingback: 2010: Nová Základná Téma pre WordPress 3.0 | Twenty Ten

  54. Pingback: NetzBlogR » Echtes WYSIWYG in WordPress

  56. I really hate that in the new WordPress Twenty Ten Theme. There’s a limited with in the editor, and i think think this is really confusing and irritating for some users

  57. Pingback: How to style the WordPress TinyMCE WYSIWYG visual editor | WP Journo: WordPress CMS & Journalism

  59. Pingback: Shun the Plugin: 100 WordPress Code Snippets from Across the Net | WordPress, Multisite and BuddyPress plugins, themes, news and help – WPMU.org

  60. Pingback: SFCite | Blog | Shun the Plugin: 100 WordPress Code Snippets from Across the Net

  61. Thanks for the excellent post! I’d also like to contribute a couple more things that I found made this even more powerful:

    1. Similar to what R’phael Spindel said in his comment about using the DRY principal, I separated the content-related styles from the style.css so that I don’t have to add/edit css rules in 2 places. So I have an additional stylesheet ‘content.css’ and my theme loads this file using wp_enqueue_style(). I chose this over @import as I think it will yield better performance.

    2. mattm asked how to force the TinyMCE to display using the same width as your theme’s content. I did this by adding the following to my content.css (comments added for clarity):

    body.mceContentBody {
    width: 590px; // The same width that the theme sets for content
    margin: 0 auto; // This is just to make it centered in the TinyMCE editor
    padding: 10px; // Padding and borders just to give a visual cue while editing
    border-right: 1px solid #DDD;
    border-left: 1px solid #DDD;
    color: #333333; // Setting the text color, size, font to match the theme
    font-size: 12px;
    font-family: Arial, Tahoma, Verdana;
    }

  63. Pingback: 8 полезных кодовых сниппетов для WordPress 3.0 | Очередной блог фрилансера

  65. Pingback: Style the Visual Editor with Themes » Wordpress Tutorials

  66. Pingback: 101 Useful WordPress Snippets | Resources and Tools

Comments are closed.