When editing content in the TinyMCE editor, it would be nice for the text to look like it will once you publish the content. In previous versions of WordPress, there was no easy way to do this. You had to do some hacks to get the visual editor to display your style sheet.
Style the TinyMCE Visual Editor
To style the editor so your content in the dashboard looks like the content your publishing, you simply add the following to you functions.php file of your theme:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** Add Editor Styles within a WP Child theme*/ | |
| add_editor_style(); //This will use the default styles of your child theme stylesheet. | |
| /** Add Editor Styles for WP Themes */ | |
| add_editor_style( 'custom-editor-style.css' ); |
Worked perfect, tested it on two frameworks as well; my favorite which is Genesis and PL’s which a few of my sites are still on.
This was such a nice find. I was working on a site for a client and they were complaining how the editor and the published page were so different. This really has been a valuable addition to the WordPress codebase for me. I use it on my themes.