Editor Stylesheet


Brief Introduction

We are going to open a box that has been sealed shut for years. We will break down the reason why the admin panel editor does not always replicate the styles used on the front end of the website.

There are going to be two items coming into play.

  1. The currently active themes editor-style.css file.
  2. The TinyMCE editor.

Currently Active Theme

The currently activate theme is the first of our two ingredients. This may be the default WordPress theme shipped with WordPress; a free theme downloaded from the WordPress Themes Repository; or a premium theme purchased from a 3rd party WordPress theme developer.

WordPress Theme

WordPress ships with a default theme, typically titled after the current year. Currently, the default theme is named TwentyFourteen.

This particular theme will include an editor-style.css file. This file was created by WordPres to be included in the initialization of the TinyMCE editor (more below).

The purpose of the editor-style.css file is to contain additional styles; specifically for use inside the content editor. If we open this file, we can see all of the styles that have been created ONLY for use inside the content editor.

Sample editor-style.css file.

Other Themes

What happens when we switch from the default WordPress theme to another theme downloaded from the WordPress Themes Repository, or purchase a premium theme?

When the theme is switched in the admin panel; the default WordPress theme is deactivated and the new theme is activated in it’s place. This happens anytime a theme is switched.

If the default WordPress theme is deactivated; then so are all of the associated theme files. In our case, the editor-style.css file is also deactivated since it applies specifically to this theme.

So, it is up to the theme developer to include an editor-style.css file inside their theme.

Theme editor-style.css File

Do all themes include an editor-style.css file? The unfortunate answer is, No. There may be a variety of reasons why a theme author may not have created this file.

If the file is not included in the theme; then the editor will not be able to include the file. The result; the editor styles do not match the styles used by the theme author on the front end of the website.

If having the editor styles match the styles used on the front of the website; then you may wish to consult the theme author to inquire if the editor-style.css file has been included in their theme.

Including the editor-style.css File

If the theme author did in fact include an editor-style.css file with their theme; then they are probably already including the file in the initialization of the TinyMCE editor.

Some themes (and I have only seen a handful in my time) go the extra mile and ensure the editor-style.css file allows the TinyMCE editor to exactly replicate the styling used in the themes style.css file for the front end of the website.

TinyMCE Editor

The second of our two ingredients is the TinyMCE editor itself. TinyMCE is a javascript based platform which can turn a normal textarea into a rich text editor.

TinyMCE uses it’s own stylesheet to control the base styling of the editor. Since TinyMCE shares no relation with WordPress (other than WordPress using the software), there is no way for the TinyMCE editor to know exactly what styling to apply to the editor.

However, the developers at TinyMCE were smart enough to realize any platform using their software (editor) will probably want to style the editor differently. So, they included a hook in their code which allows an additional stylesheet to be included in the editor. They call this hook the content_css hook.

Enter the WordPress Add Editor Style function.

WordPress Add Editor Style

The WordPress add_editor_stlye() function allows a theme (or plugin) to include a stylesheet from another location into the TinyMCE editor.

A quick look at the add_editor_style() function shows how an external stylesheet is included in the TinyMCE editor.

function my_theme_add_editor_styles() {
    add_editor_style( 'custom-editor-style.css' );
}
add_action( 'after_setup_theme', 'my_theme_add_editor_styles' );

When a theme writes the editor-style.css file; this is the function they will use to include that file into the TinyMCE editor.

This is the “bridge” between the theme styles on the front end, and the TinyMCE styles seen in the editor.

WP Edit Pro Editor Stylesheet

Now that we have an understanding of how the TinyMCE editor styles are loaded, we can take a deeper look at how WP Edit Pro can help “fine-tune” the styles between the theme and the editor.

This option allows the administrator to create a stylesheet that will be used in the TinyMCE content editor. The option will be written to a new file; and used when initializing the content editor.

The WP Edit Pro Editor Stylesheet will only apply the CSS to the TinyMCE editor styles. If the same styles are not already available in the currently active theme; they will need to be added.

Example H3 Header

Let’s imagine our theme uses pretty blue header text wherever we use an H3 tag. In the editor, we select the text to apply the header, and click the dropdown to select the H3 tag.

But.. it looks different in the editor and on the website?

TinyMCE Editor View
editor_style1
Website View
editor_style2

What happened? Why is it blue on the website but not inside the content editor?

This means the theme styles and the editor styles are not matching. The most likely cause is because the theme author did not take this into account when creating the editor-style.css file.

We can use our Browser Inspection Console to view the CSS used on the front of the website. Then, we can take what we need and add it to the WP Edit Pro Editor Stylesheet. I can’t go into the details of using the browser inspection tools; but a Google search should yield plenty of results.

View the post in the browser; and right-click on the element to be inspected. Take a look at the CSS. In this case (since I designed this example) we want to take the blue color and add it to the WP Edit Pro editor stylesheet option.

Website Inspection
editor_style3
Editor Stylesheet
editor_style4

Once the new style has been added to the WP Edit Pro editor stylesheet; the next time the TinyMCE editor is loaded, the new style should be visible.

Editor View
editor_style5
Website View
editor_style2

The editor styles and the website theme styles now perfectly match.

Extending TinyMCE Editor Styles

Now that we can manipulate the styles between the theme and the editor; we can take things one step further.

The WP Edit Pro Editor Stylesheet can be used in conjunction with the WP Edit Pro Custom Styles to create new styles; which is extremely helpful if you are creating custom content in the editor and wish to style it yourself.

The following illustrates how to add the custom styles to the TinyMCE editor. It will not add the custom styles created to the front end of the website.

To add the styles to the front end of the website; it is recommended to use a WordPress Child Theme, or a Custom CSS Plugin.

WP Edit Pro Custom Styles

First, we strongly encourage you to read our page on Custom Styles. This page outlines how to create a custom style for the editor.

When creating the custom styles (for this example); it is necessary to use a Class Name for each style (instead of hard coded style attributes).

Create and save the custom style, and scroll down to the Editor Stylesheet option.

Now, create the CSS for the custom style created above. Save the Editor Stylesheet option when completed.

An example p tag with custom css.
editor_style6
It is imperative the “Classes” name of the created style match the class name used in the editor stylesheet. In the example above, this class name is “testClass”.

Once the style has been created; and the custom css has been created; the final results can be viewed in the content editor.

  • Making sure the “Formats” button is available in the editor, visit a post and click on any paragraph element.
  • Next, click the “Formats” button. Hover over the “Custom Styles” menu item, and the newly created style will be available.
  • Click the style, and it will be applied to the selected content.
Before
editor_style7
After
editor_style8

We can see the new blue, bold style has been applied to the content.

It may be necessary to manually empty and refresh the browser cache before the created styles will be visible.

Closing

The combination of the Custom Styles and the Editor Stylesheet can be a very powerful tool. However, it is necessary to understand the basics of CSS before using this advanced functionality.

We encourage users who are unfamiliar with CSS to visit the following resources:

Don’t forget, you may also wish to ask questions on our Dedicated Support Forum.


Josh Lobe has written 53 articles

Josh Lobe is the sole developer of WP Edit and WP Edit Pro. A father of two; a husband to a beautiful wife; and a small home in the suburbs... he primarily enjoys coding in WordPress and designing websites.

One thought on “Editor Stylesheet

  1. J.R. Miller says:

    Josh,  I am working in a theme today (Nova: elegantthemes.com) that is just slaying my code in the text editor.  I am using WP Edit.  Will WP Edit PRO allow me to add styling with out it being stripped out?  Thanks friend.

    JRVII

    :o)

Leave a Reply

Your email address will not be published. Required fields are marked *

ENTER CAPTCHA MATH *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>