How to Add Custom CSS Styles to WordPress Post Editor

By 2 years ago   BloggingTutorialsWordPress
Tweet Share Email Share  

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.

16 comments on “How to Add Custom CSS Styles to WordPress Post Editor

  1. man says:

    Wow that,s a 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 favourite 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.

  5. siful says:

    thanks for sharing. this helps me a lot. i am waiting for the future post.

  6. 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..

  7. 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 .

  8. Thanks for Share this Post. i Have Try Many Times to Add Custom CSS Style in Post Editor But Every Time i am Fail. Your Tips Help Me a Lot, Now it Work in My Blog. Thanks Again for Help Us.

  9. sachin says:

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

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

  11. 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

  12. thanks to give your time to write the post its very nice n easily to understand post….

  13. Mr Wali says:

    This is really an best giveaway for all of your

    site reader. it up this Great work!

  14. 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 *

ALL comments are moderated. No links allowed. Use real name. Only useful comments will be approved.