I use a custom stylesheet for TinyMCE, by placing custom styles in editor-style.css in my theme's directory.

I am trying to figure out how to use a different stylesheet depending on what post type we are editing.

One way of getting different styles in TinyMCE is to toggle a class in the TinyMCE iFrame's <body> tag. I have seen this in the New York Times' ICE editor plugin, a javascript version of Microsoft Word's "track changes" functionality that can be used with TinyMCE. That's how it toggles visibility of edits without changing the post's HTML. Here's a self-contained example of this:

var toggleBodyClass = function() {

    var ed = tinyMCE.activeEditor;
    var body = ed.getBody()
    var cm = ed.controlManager;

    if(ed.dom.hasClass(body,'code-view')) {
        ed.dom.removeClass(body, 'myCustomClass');
    } else {
        ed.dom.addClass(body, 'myCustomClass');


This doesn't allow me to use a separate stylesheet per se, but I can use .myCustomClass to create alternate all the alternate styles I want in editor-style.css.

The thing is, I'm not sure how I could set up something like this to be conditional on post type.

Is there something I can add to functions.php to achieve this?


As of 3.4, some classes have been added to TinyMCE so you can target them, including for custom post types. So, for instance, you will see post-type-{$slug} as a class on the body. See Trac ticket #19437 for more information.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.