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 that 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 me work better… and you can also customize what works best for you.

Custom Styles in WordPress Visual Post Editor

Lets see what mine (and yours) WP post editor screen looks like now in Visual Post Editor

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

Step 1 – First, you need to add_editor_style function by adding the following code in your theme functions.php file. [Remember this is a powerful file and the 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( 'after_setup_theme', 'qot_add_editor_styles' );

Step 2 – After that you need to add a file called custom-editor-style.css (or any other name you like you can change here) in your theme folder. It can be easily done via or FTP of by creating new files without FTP also.

custom editor css

Step 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 colors to my liking.

Import Custom Style.css

If you use a highly custom CSS,  you will realize that what you see in the WordPress post editor is actually not what is displayed on the live website once the post is saved or updated.  For example, I really cannot make out the custom link color as it appears in the post text.

So here is the fix that based on the similar example above –  you basically need to import the CSS URL into the editor stylesheet, instead of adding the CSS code.

@import url("https://sitename.com/wp-content/themes/themename/style.css");

After you save the changes, it is very important to clear your browser cache as well as clear the WordPress cache, else you will notice no changes!  After that, once you reload the WordPress editor again, you will see the same styling as that on your website. 

>> Here is how you can import Bootstrap CSS and Font Awesome Icons in a similar manner.

Does it affect Page speed? This custom editor CSS file does not load on the main blog pages, so it does not contribute to slowing speeds on page speed tests. However, if you load large CSS imports, you might notice a slight increase in Post editor load times till the text becomes visible as it will load these custom CSS before the text loads.

Basically, 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. Note This will change the look of the Visual editor and not change the 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.

Get free awesome tips by email




Unsubscribe anytime. No spam. 10,000 subcribers
Sendy Self Hosted Newsletter SEMrush

14 Comments

  1. man says:

    Wow that’s great stuff. Can you please tell me how to add custom style sheets on different pages. I mean Home page and my BIO page in different style sheets

  2. vipul says:

    I have been running my own e-commerce websites.I have total 10 websites 5 of them are based on word-press.I think this post will be very useful for my new-staff who relatively new to the wordpress .thanks for sharing this because I can explain them this change verbally but You have explained It in very proper manner

  3. Mit says:

    wow it looks very good and attractive. As WordPress is my favorite platform and i love to work on it and now i am going to update this and will enjoy this new look

  4. sunil says:

    cool topic to cover, and thanks for sharing as well, now my question is:
    Will it affect my theme? because my theme don’t have child theme. or do i need to take backup?

    awaiting for reply.
    thanks
    sunil

  5. Shilpa Verma says:

    I always wanted to find a way to Maximize my User Experience by giving them an awesome Design via WordPress, thanks for sharing this cool article about it..

  6. Asif says:

    For me this post is very helpful for me. I think its the easiest and secure way to add style in WordPress post .

  7. Abhishek Jain says:

    I Have Tried Many Times to Add Custom CSS Style in Post Editor But Every Time I Failed. Your Tips Help Me a Lot, Now it Works in My Blog. Thanks Again for Helping Us.

  8. sachin says:

    Can we add this css style in my own wordpress website?

  9. shamit khemka says:

    cool i used this method and guess its working and very fine looks

  10. Puneet Kaur says:

    Hello P Chandra,
    Amazing post here, this is really helping me in making my page more presentable and attractive. Thank you for the example that is given, making it very easy to use the custom editor style
    Thanks

  11. Mr Wali says:

    This is really an best giveaway for all of your

    site reader. it up this Great work!

  12. Gaurav Verma says:

    sometime i need css. thanks for sharing a cool article. keep posting this type of article.

Leave a Reply

Your email address will not be published. Required fields are marked *