Title: adding css to Visual Editor
Last modified: July 3, 2017

---

# adding css to Visual Editor

 *  [sybok](https://wordpress.org/support/users/sybok/)
 * (@sybok)
 * [8 years, 9 months ago](https://wordpress.org/support/topic/adding-css-to-visual-editor/)
 * I am having a problem with css in TinyMCEAdvanced; hopefully someone can clarify
   what I should do.
 * I have created a child theme. One of the requirements is to create a large table
   in the Visual Editor. To do that I created a new Button in the TinyMCE toolbar.
   Pressing the button inserts a bunch of html. The various html elements have classes
   assigned to them, things like AP-table, AP-table-td, etc. This process works 
   fine.
 * In the child theme folder I have created style.css which assigns the various 
   styling properties to the classes in the html. When I create a page with the 
   button-added html, the page displays correctly when viewed as the final page 
   outside the editor. However, the table does not display correctly in the Visual
   Editor.
 * I have added the following code to child/functions.php in an attempt to get the
   editor to use my css:
 *     ```
       function child_theme_add_editor_styles() {
           add_editor_style('style.css');		// add Child css
       }
       add_action( 'admin_init', 'child_theme_add_editor_styles' );
       ```
   
 * When I do this, the good news is that the html code now displays correctly in
   the Visual Editor.
 * The bad news is that all the usual formatting in the Visual Editor does not work.
   For example, a line marked as Heading 2 looks like normal text. When the page
   is viewed in the web site it looks fine. It is only wrong in the editor.
 * When the Visual Editor starts to edit an existing page, I see a brief flash where
   the formatted text shows correctly. Then the formatting goes away.
 * If I comment out the add_editor_style line above, then I get the correct formatting
   of text (of course, my table html then does not display correctly in the Visual
   Editor).
 * I do not understand why add_editor_style wipes out the normal formatting; I expected
   it to append my style.css, which only uses classes which I expect are unique.
 * Is there a way to have both formatting styles work in the Visual Editor? I assume
   I am doing something simple wrong.

Viewing 2 replies - 1 through 2 (of 2 total)

 *  [kjodle](https://wordpress.org/support/users/kjodle/)
 * (@kjodle)
 * [8 years, 9 months ago](https://wordpress.org/support/topic/adding-css-to-visual-editor/#post-9284633)
 * You should post this in the TinyMCE Advanced dedicated support forum [here](https://wordpress.org/support/plugin/tinymce-advanced),
   so that the developer is aware of it.
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [8 years, 9 months ago](https://wordpress.org/support/topic/adding-css-to-visual-editor/#post-9285221)
 * It sounds like some other code might be overriding your styles, such as a plugin,
   or maybe the parent theme. See if you still have the same problem with all plugins
   deactivated. You might be able to affect what styles are applied last by adding
   your action callback with a large priority number so it is added last. The last
   declared styles overrule any other styles with the same specificity.
 * Look at the edit screen’s HTML source and confirm your stylesheet is declared
   last. I might have it backwards and you should use a small priority.
 * If you look at how the default twenty* themes handle this, they add a dedicated
   TinyMCE stylesheet that is a limited sub-set of theme styles. Mainly styles related
   to colors, fonts, column widths, etc. Loading all theme styles might be overriding
   styles you shouldn’t.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘adding css to Visual Editor’ is closed to new replies.

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 2 replies
 * 3 participants
 * Last reply from: [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * Last activity: [8 years, 9 months ago](https://wordpress.org/support/topic/adding-css-to-visual-editor/#post-9285221)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics