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 stylesheets for any custom post types you might end up with in WordPress 3.0.

That’s it folks, cheers!

Liked this post?

Subscribe to the site feed with RSS or by email.

Tags: , , , ,
Category: WordPress

Comments

  1. LairBobMay 20, 2010

    Very helpful — just switched to the 3.0 beta myself, and this is going to save me a lot of grief trying to figure this part out. Thanks.

    ( Reply )
  2. flashmacJune 25, 2010

    This will come in very handy – thanks for sharing bud

    ( Reply )
  3. Ben CopeNovember 6, 2010

    This is very helpful, but how would you change the editor style for page templates … in my case, the default page width is the same as for posts, but I also have a “full-width” page template that has a different width.

    How could I load a different editor style for a page using the “full-width” page template?

    ( Reply )
    1. GordonMarch 31, 2011

      Did you ever find a solution for your question?

      This is very helpful, but how would you change the editor style for page templates … in my case, the default page width is the same as for posts, but I also have a “full-width” page template that has a different width.

      How could I load a different editor style for a page using the “full-width” page template?

      I have the same problem.

      ( Reply )
    2. StephenJanuary 15, 2012

      I got this to work by using the $GLOBALS['post']->page_template variable to change my stylesheet based on the current page template…

      Here’s the modified code:

      function my_editor_style() {
      	
          switch ($GLOBALS['post']->page_template) {
          
      	case 'page-two-column.php': // Change to your template filename
              add_editor_style('editor-style-two-column.css');
              break;
          default:
              add_editor_style('editor-style.css');
              break;
          }
      }
      
      add_action( 'admin_head', 'my_editor_style' );
      
      ( Reply )
  4. NqfaqFebruary 25, 2011

    I try to do it in my blog, it really help me , the GUI make it easy

    ( Reply )
  5. rudolfMarch 4, 2012

    wonderful tip, bravo and thx a bunch!

    ( Reply )
  6. The MakerJuly 2, 2013

    very good post! thank you!

    how can i add a specific editor-style for a selected page? for example i have 3 pages in my backend (home,contact,business) and i want on the business page an other editor-stylesheet how can i fix this?

    ( Reply )

Leave a Reply

( Get a Gravatar )
  1. Gravatar

    Your Name
    July 28, 2014


Trackbacks and Pingbacks

( Leave a Trackback )