Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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');
    }

    ed.execCommand('mceRepaint');
}

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?

share|improve this question

1 Answer 1

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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