Change Editor Style In WordPress 3.0

In WordPress 3.0, there's a new interesting feature: you can change the style of default post editor (TinyMCE). It means you can make the post content in visual editor look exactly the same as in the front-end. You don't need to save the post, preview it before publishing anymore. It now can be done easily with new function add_editor_style().

Add the following code into your functions.php file:

add_editor_style();

The function add_editor_style() looks for the editor-style.css file inside theme folder, and includes it in the post editing page. In this CSS file, you can define any rules for styling post's elements like: unordered/ordered lists, blockquotes, images, headers, tables, etc. These rules are applied in the post editor only, not in the front-end.

So, to make the post content look like in the front-end, follow these steps:

create a blank file inside theme folder with name editor-style.css
open your style.css file (this is the main CSS file of your theme)
look for the code for styling post content and copy it into editor-style.css file

Let's see an example of default WordPress 3.0 theme – TwentyTen. In editor-style.css file of this theme, there're some CSS rules like this (this is a part of this file, you can check the file yourself for full version):

html .mceContentBody {
    max-width:640px;
}
* {
    font-family: Georgia, "Bitstream Charter", serif;
    color: #444;
    line-height: 1.5;
}
/* Text elements */
ul {
    list-style: square;
    margin: 0 0 18px -18px;
}
ol {
    list-style: decimal;
    margin: 0 0 18px -18px;
}
strong {
    font-weight: bold;
    color: #000;
}
cite, em, i {
    font-style: italic;
    border:none;
}
big {
    font-size: 131.25%;
}
blockquote {
    font-style: italic;
    padding: 0 3em;
    margin-left: 0;
    margin-right: 0;
}

a:link {
    color:#0066CC;
}
a:visited {
    color:#743399;
}
a:active,
a:hover {
    color: #FF4B33;
}

As you see, the author of this theme has declared the width for editor box and CSS rules for text elements of post content. If you compare it with CSS rules for real posts in style.css file, you'll see that they're the same.

Of course you can do more with editor-style.css file like style the editor box width, height or even style the post content in different way. Using editor-style.css file smartly can help you preview your post in real-time without any efforts. Just remember that this style doesn't affect to front-end.

Comments