How To Enable Visual Editor Actually WYSIWYG

Enable Visual Editor

DigWP, one of my favorite WordPress Tutorials, share another useful tips, How To Enable Visual Editor Actually WYSIWYG.

If you are TwentyTen Theme user, you will find that when you are activated and use Visual Editor and edit your content on that mode, you will show the WYSIWYG editor have the same layout on you actually themes.

Now we will share it what DigWP has did on this post, first you need declare your editor style, added this tiny code on your functions.php

// Add CSS to Visual Editor
add_editor_style('my-editor-style.css');

Please note, you must and have my-editor-style.css on your current theme folder. And you need added code on you’re my-editor-style.css like this example

.post h1, .post h2, .post h3, .post h4 { font-family: MuseoLight, Georgia, serif; font-weight: normal; margin: 0 0 10px 0; }
.post h2 { font-size: 28px; }
.post h2 { padding: 10px 180px 10px 15px; background: #237abf url(../images/title-bg.png) repeat-x; margin: 0; line-height: 1.3; font-size: 22px; }
.post h2, .post h2 a { color: white; text-shadow: 0 1px 2px #143855; }
.post h2 a:hover { color: #b8e0ff; }
.post h3 { font-size: 20px; padding: 5px 0; margin: 30px 0 15px 0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }
.post h4 { font-size: 18px; }
.post p { margin: 0 0 10px 0; }
.post pre { background: #eee; padding: 15px; overflow: auto; margin: 0 0 15px 0; border: 1px solid #ddd; }
.post pre code { font-size: 11px; }
.post code { background: #eee; font: 12px Monaco, Courier, Monospace; color: #0E304A; }
.post h3 code { font-size: 18px; }
.post acronym, abbr { border-bottom: 1px dotted #514031; cursor: help; }
.post ins { text-decoration: underline; }
.post del { text-decoration: line-through; }
.post a { outline: none; text-decoration: none; color: #19517C; background: #eee; border: 1px solid #ddd; padding: 1px 3px 2px 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.post a:hover { color: #fff; background: #143855; border: 1px solid #143855; }

On the sample code above, your post loop have .post class. The last problem is, WordPress Admin dashboard editor didn’t have .post clasess, so we need litle bit tweak it by added littl function on functions.php

// Add body class to Visual Editor to match class used live
function visual_settings( $initArray ){
 $initArray['body_class'] = 'post';
 return $initArray;
}
add_filter( 'tiny_mce_before_init', 'visual_settings' );

And done, now you have follow our tutorial How To Enable Visual Editor Actually WYSIWYG and you can test it on your own Themes. Have a nice day.. Happy New Year 2011