Customize WordPress Post Editor CSS Styles

Do you know you can actually change the CSS styles of the entire editing area / editor where you create the post content in WordPress? It doesn’t have to be the default styles and since version 3.0, people can freely style the TinyMCE rich text editor shipped with WordPress however they want to by a few simple changes to the theme files.

Step 1

Open the functions.php file in your theme folder (create it if it doesn’t exist) and add this line anywhere in the PHP tags <?php … ?>:

add_editor_style();

Step 2

Create a css file named editor-style.css and put it in the theme root, namely the same folder where functions.php is in. To start with, you may want to copy the CSS styles from that of the Twenty Eleven theme into yours.

Now you can freely change those styles (such as rich text font, size or color, etc.) to have your own customized WordPress editor styles. The default editor styles coming with Twenty Eleven are very nice that make me long to write. So I’m now using them for my editor in the current theme, Thesis. You should too, if you find it more inspiring than the default styles.

Scroll to Top