Editor Styles for Custom Post Types in WordPress 3.0

I've had some fun playing around with the recently released WordPress 3.0, Beta 1. One of my new favorite additions is the add_editor_style() which allows you to assign a CSS file for the TinyMCE when editing posts, pages and the new custom post types. This is very handy to get closer to a WYSIWYG experience in WordPress' editor and not having to preview the posts all the times while writing, to check where line breaks end up and so on (if you care about those things).

I'm also loving the new Custom Post Types, and on one of my sites, I have setup a few different post types. On the frontend I have different widths for posts, pages and my new WordPress 3.0 custom post type 'portfolio. I wanted to reflect the different widths in my admin editor style sheet as well. The posts are the narrowest ones, while pages are wider and my custom post type portfolio is the widest, so I have made 3 style sheets which are pretty much the same, with the exception of the

html .mceContentBody {
  max-width: 640px;
}

which sets the width for the editor. My style sheets are named; editor-style-post.css, editor-style-page.css and editor-style-portfolio.css. To be able to decide which post type I'm editing I check post_type in the $current_screen variable and then set the correct CSS according to that.

The code I end up with adding to my functions.php file looks something like this.

function my_editor_style() {
    global $current_screen;
    switch ($current_screen->post_type) {
    case 'post':
        add_editor_style('editor-style-post.css');
        break;
    case 'page':
        add_editor_style('editor-style-page.css');
        break;
    case 'portfolio':
        add_editor_style('editor-style-portfolio.css');
        break;
    }
}
add_action( 'admin_head', 'my_editor_style' );

By expanding on the code above you can continue defining style sheets for any custom post types you might end up with in WordPress 3.0.

That's it folks, cheers!