Earlier today, @Liangxin updated his Deve theme with a new “Apply theme styles to the post editor” option. Curious, I dug into the update package:

It turns out that since WordPress 3.0, there’s a practical feature that lets you customize the default TinyMCE editor’s styles, enabling live preview of post formatting in the Visual editor that matches the published appearance — no need to switch to the front end to check. WordPress 3.21’s default theme Twenty Eleven already integrates this feature. The Twenty Eleven theme is incredibly powerful, incorporating many of WordPress’s newest features — to this day, I haven’t found a more capable theme.

Here’s how to set it up. PS: Thanks to @Liangxin for the guidance.

Open the default theme Twenty Eleven’s functions.php (functions template) and you’ll see a clearly annotated line of code:

// This theme styles the visual editor with editor-style.css to match the theme style.
add_editor_style();

The comment roughly translates to: The visual editor matches the theme’s editor-style.css styling.
That’s the key line. I won’t use any specific theme for this demonstration — here’s the method directly:

1. Create a file named editor-style.css, paste the following styles into it, and place it in your theme’s CSS directory:

body {
    font: 13px'Microsoft YaHei',
    微软雅黑,
    Arial,
    Lucida Grande,
    Tahoma,
    sans - serif;
    color: #000;
    text - shadow: 0px 1px 0px#d1d1d1;
    width: 700px;
}
ul li {
    list - style: square inside;
    line - height: 24px;
}
h1 {
    font - size: 18px;
    line - height: 185 % ;
}
h2 {
    font - size: 16px;
    line - height: 185 % ;
}
h3 {
    font - size: 14px;
    line - height: 185 % ;
}
ul,
ol,
dd,
pre,
hr {
    margin: 0 0 10px 0;
}
p {
    line - height: 185 % ;
    text - indent: 2em;
    margin: 0 0 10px 0;
}
blockquote {
    width: 660px;
    color: #4e6384;
    line - height: 23px;
    margin: 5px auto 5px auto;
    padding: 10px;
    clear: both;
    border: 1px solid#ccc;
}
code {
    width: 660px;
    font: 12px / 17px tahoma,
    arial,
    sans - serif;
    color: #4e6384;
    display: block;
    margin: 5px auto 5px auto;
    padding: 10px;
    border - left: 3px solid#8391A7;
    border - right: 1px solid#8391A7;
    border - top: 1px solid#8391A7;
    border - bottom: 1px solid#8391A7;
}
blockquote td {
    border - bottom: 1px solid#ccc;
    padding: 2px;
}
/ Image-text layout /img.centered {
    display: block;
    margin - left: auto;
    margin - right: auto;
    margin - bottom: 10px;
}
img.alignnone {
    margin: 0 0 10px 0;
    display: inline;
}
img.alignright {
    margin: 0 0 10px 10px;
    display: inline;
}
img.alignleft {
    margin: 0 10px 10px 0;
    display: inline;
}.aligncenter {
    display: block;
    margin - left: auto;
    margin - right: auto;
    margin - bottom: 10px;
}.alignright {
    float: rightright;
    margin: 0 0 10px 10px;
}.alignleft {
    float: left;
    margin: 0 10px 10px 0;
}

2. Open your theme’s functions.php template file and add:

//Admin editor preview
add_editor_style('/css/editor-style.css');

Here, /css/editor-style.css represents the path to the editor-style.css file within your theme. If your theme doesn’t have a css folder, you can place editor-style.css directly in the theme’s root directory, and you won’t need to include /css in the path in functions.php.

That’s basically it!

Here’s a screenshot of my blog’s admin post editor:

Since the admin editor and the published post (front end) exist within different style frameworks, when modifying your theme you’ll need to extract the post-body-related styles from your theme’s style.css and remove the specific selectors. You can also reference the editor-style.css in the default Twenty Eleven theme. The key is to set the body width to match your theme’s content area width.

If you have trouble modifying your theme after reading this, feel free to leave a comment, or search Google for similar tutorials.