How to Customize WordPress Editor Styles

Monday, July 29, 2013

How to Customize WordPress Editor Styles

WordPress is updated regularly, about 2 or 3 times a year. In each of its new release, it introduces either some new feature additions or some improvements to the existing ones. In this post, we will be discussing one WordPress feature that I think is overlooked by many, that is the Editor Styles.

Prior to version 3.0, where this feature was first introduced, you frequently need to refresh your page to see how your post looks like in the front side. This is due to the fact that the content styles at the WordPress TinyMCE editor is quite different from one at the front-side. The styles in the front-side come from the theme styles.css, while the editor styles are specified from the WordPress core function.

Recommended Reading: 30+ New Useful WordPress Tricks & Hacks

As you can see below, the WordPress editor uses Serif font family for the content, while at the front-side it uses Sans Serif font.

In version 3.0, WordPress let’s you customize the editor styles to match your theme styles. Let’s take a look.

Add Editor Styles Function

The editor styles can be added with add_editor_style() function. You need to create a separate stylesheet for your style editor apart from the default stylesheet. Assuming that you named it editor-style.css, you can add the following in your functions.php file of your theme.

 add_editor_style('editor-style.css');

This stylesheet should contain only the styles for the elements on your post like the paragraphs, headings, links, and images. But if you are unsure what is necessary to include in this stylesheet, here is my tip:

Download one of the WordPress default styles like TwentyTen, copy the editor-style.css, you can then customize the style rules to match the ones from your theme, and to set the tinyMCE width, we can add the following in the stylesheet:

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

That’s it, you should now find that your content styles in the editor looks similar as in the front-side.

Editor Style for Post Types

In version 3.0, WordPress allows you to create Post Types to hold different focus of content. By default, WordPress allows you to create Page and Post. Using Post Types, you are able to create one for Products or Portfolio with more customized field sets, for example.

To add specific Editor Styles for your Post Types, you can add the following functions.php.

 function my_theme_add_editor_styles() { global $post; $post_type = get_post_type( $post->ID ); $editor_style = 'editor-style-' . $post_type . '.css'; add_editor_style( $editor_style ); } add_action( 'pre_get_posts', 'my_theme_add_editor_styles' );

Now, in your theme directory, create the stylesheets with the following name convention editor-style-{post_type}.css. If you prefer using different name, simply change the value in the $editor_style.

For more advanced implementation, you can head over to the following reference at WordPress.org Codex.