Word Press: Custom CSS styles in the WYSIWYG editor Published on January 13, 2010
Adding your custom CSS styles to the word press WYSIWYG native editor (TinyMCE editor)
I’ve always found a bit odd why couldn’t we apply our own css styles when writing our Word Press Posts and pages.
So I’ve done a bit of research and I came up with a solution to get this done.
The objective is to be able to apply your own CSS styles (classes) to the elements in your posts and pages. E.g. if you want an image to float left, simply apply the “fLeft” class. Or by the other hand if you need an image to float right, just apply it the fRight class.
For a code savvy user this is no obstacle, since he can use the code mode in the editor and apply the classes by hand. But for most of the WP users (e.g. Our clients) this is a no-go situation, that you need to sort.
In this tutorial we will do it. Simply define you classes in your styles.css or other linked CSS, and latter apply them by means of a select box with all your custom styles listed.