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.
- The currently active themes editor-style.css file.
- 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.
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.
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.
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?
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.
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.
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.
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.
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.
We can see the new blue, bold style has been applied to the content.
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, 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)