WordPress Editor Stylesheet creation tutorial

What is WordPress editor stylesheet?

WordPress ships with open source editor TinyMCE.It has two modes Text and Visual.You create new posts or edit new posts using this editor.WordPress editor stylesheet displays the post content in format it will get displayed by your theme.WordPress editor stylesheet is a CSS file.It ships along with your theme but i it does not ship with editor stylesheet then you can create using step mentioned below.

It makes it easier for you to preview look of post content while writing the post.You do not need to preview the post from time to time.The content creation becomes easier.But not all themes ship with editor stylesheet.So should you dump a theme just because it does not have editor style sheet.The answer is NO.In this post we will see easy method to create workable editor stylesheet file for all theme.

How to create WordPress editor stylesheet?

Creating WordPress editor stylesheet for your theme consists of couple of steps.The below method works for all themes.It may not give you perfect editor stylesheet but certainly gives you workable one.Since every theme is different from other getting perfect editor stylesheet for a theme using general method may not be feasible.Moreover the method described below is easy enough for non technical as well.You do not need knowledge of HTML and CSS.

Changing Functions.php file

Every WordPress theme has functions.php file.This file is in general main directory of your theme.The first step is to add support for custom editor stylesheet file in your theme.This is a simple step.You need to add below code in your functions.php file.You can copy below code and paste into the file (at the very end) or just after any add_action line in your theme.Save the file.

add_editor_style();

Creating new Editor Stylesheet file

Next step is creating the stylesheet file for your editor.By default WordPress looks for a file named editor-style.css within main directory of your theme for applying editor stylesheet.Now you should create a new file editor-style.css in theme directory.Now add below lines in editor-style.css file.

This remains the same for all themes (this is generic step).You can copy below code and paste onto your newly created editor-style.css file.

body#tinymce.wp-editor {
}

Next step we will see theme specific step.

Editing Editor Stylesheet file

Now we have to add theme specific content in the editor-style.css file.To do that follow below steps

  • Open style.css file of your theme
  • Search for body within the style.css file.Some themes have this search key in some other css file then you need to search css files of your theme for this
  • There will be more than one occurrence of body in stylesheet file.We need to consider body in which we have font-family search key.You need to copy content between opening { and closing } of body which have font-family in them.
  • Below is code from my theme for your reference.You can see that it has font-family as well.So we need to copy four lines in between { and } braces.
body {
	font-size: 14px;
	font-family: Helvetica, Arial, sans-serif;
	text-rendering: optimizeLegibility;
	color: #444;
}
  • Now paste these four lines in editor-style.css between opening and closing braces of body#tinymce.wp-editor.You should copy and paste the lines in your theme.
  • Save the file.

Extending editor stylesheet file

The above method gives you decent editor stylesheet.You can extend it further by adding support for more HTML tags.Now lets take example of adding support for links.To add support for links you need to add below tag in editor-style.css file

body#tinymce.wp-editor a {

}

Note that body#tinymce.wp-editor remains the same.Since we need to add support for links that’s why there is a in above code.For other HTML tags we need to add other tags in place of a.
You will have to search for the tag in theme your style.css file.The lines should contain only the HTML tag in case of above example it is a.Below are two sample codes

code to be picked

a {
	outline: none;
	color: #444444;
}

code not to be picked

.entry-meta a {
	color: #757575;
}

Conclusion

WordPress editor style sheet does help you while writing the post.Using above simple steps you can enhance your productivity.Feel free to share your thoughts and queries.

Consider sharing the post in case you found this useful

Leave a Comment