How to Add Custom CSS Styles to WordPress Post Editor

You can add editor styles and change the WordPress Post Editor look with Custom CSS styles and create a pleasant writing experience which suits your eyes and makes you enjoy writing more than ever. I have been using white text on black background in post editor because it makes we work better… and you can also customize what works best for you.

WordPress Post Editor

Lets see what mine (and yours) WP post editor screen looks like now –

no editor styles

Now as I start to use this feature, it can change and make me use the style I love.

add editor styles

See how I now get a dark background which I like. I have customized a wide margin to have wide space around my text and links with green!

Add Custom Editor Styles

To get started – first you need to enable the functionality in your WordPress themes. If you are using a new theme or  a recently updated WordPress theme, then this  functionality has recently a required feature for getting theme approvals

1. First you need to add editor styles function by adding following code in your theme functions.php file. [Remember this is a powerful file and wrong code can make your site offline. Always backup this file and it will need to be restored by FTP if something goes wrong.]

function qot_add_editor_styles() {
add_editor_style( 'custom-editor-style.css' );
add_action( 'admin_init', 'qot_add_editor_styles' );

2. After that you need to add a file called custom-editor-style.css in your theme folder. It can be easily done via or FTP of by creating new files without FTP also.

3. Now once both steps are completed you are set to add CSS code to your CSS file and it will change the way your WordPress post editor looks. Here is what we added in  custom-editor-style.css to get this look.

body#tinymce.wp-editor {
font-family: Arial, Helvetica, sans-serif;
margin: 30px;
color: #DDD;
background: #333;
body#tinymce.wp-editor a {
color: #7FFF00;

The above code makes the background black, makes the text on it light grey and adds a nice margin around the text so it does not flow into the borders giving ample blank space. It also changes the fonts and link colours to my liking.

Note – this CSS file does not load on the main blog pages, so does not contribute to slowing speeds on page speed tests. The WordPress post editor by default mimics the post content as it would be finally posted, but this custom editor style helps to override the main blog CSS files to add a custom experience to your writing style. This will change the look of the Visual editor and not change display of the Text Editor.

Experiment with post editor styles and I am sure that after using this tip,  you will be more inclined to write better.