May 6, 2015

Customizing WordPress Editor Styles

WordPress is regularly updated every quarter of the year or so, with each update introducing new features and improvements over its predecessors. Here we will discuss one of the most overlooked features of WordPress, the Editor Styles. Editor Styles allows developers, especially the ones working on themes, to link custom stylesheet files to TinyMCE Editor. This function will examine the existence of relative paths that are given as $stylesheet. In cases where no $stylesheet function is specified, Editor Styles will examine the existence of our default editor stylesheet file, namely editor-style.css.


Before WordPress version 3.0, you would have to refresh the page regularly to see what your posts look like on front end. This is because the TinyMCE editor content style is different from front end styles. For instance, the front end uses styles from theme styles.css. Editor Styles, on the other hand, uses styles determined by WordPress core functionality.


From the example above, we can clearly see that WordPress Editor employs Serif fonts for content, whereas front end editor uses Sans Serif fonts. Following WordPress version 3.0, we can customize Editor Styles.

Adding Editor Styles Functionality

You can add Editor Styles with the add_editor_style() function, which is located in wp-includes/theme.php. For that you will have to create a specific stylesheet for the Editor Styles that will be different from the conventional stylesheet. Let’s assume that we named the file as editor-style.css. Now add this in the functions.php file of the theme: add_editor_style{‘editor-style.css’);

The stylesheet will only include element styles for posts like headings, paragraphs, images, and links. However, if you are not sure regarding what you should incorporate in the stylesheet, you can download TwentyTen or another default styles. Once you have a default style, copy editor-style.css; customize style rules so they match style rules on your theme, and determine the width for TinyMCE. You can use the following: html. mceContentBody { max-width: 640px; padding: 10px; }

Now you can easily find content styles on the editor that match your front end editor.

Post Types Editor Styles

WordPress now allows us to create Post Styles that can keep different types of content. WordPress by default allows us to create posts and pages. Now by using Post Types we can create pages and/ or posts for products, portfolio, and other such pages with custom field sets. This allows you more freedom to create custom pages that can incorporate the theme of the website. We can also add specific Editor Styles for Post Types. This allows us to view the changes we made to our content in real time. To do so, we will have to add functions.php, for instance: 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' );

In the theme directory, we can now create stylesheets using the following name – editor-style-{post_type}.css. If you would rather use a different name, you can easily do so by changing the $editor_style value!