BugWP logo BugWP
Back to Community
Home / Community / Plugin → Advanced editor tools

Troubleshooting: Why Your Custom Styles Disappeared from the TinyMCE Advanced Formats Menu

31 threads Sep 16, 2025 Plugin → Advanced editor tools

Content

Many users of the TinyMCE Advanced plugin have encountered a frustrating issue: custom styles from their editor-style.css file or custom style_formats array suddenly vanish from the Formats dropdown menu. This problem often appears after a WordPress core or plugin update, leaving content creators without their essential formatting tools.

Based on community reports and solutions, here are the most common causes and their fixes.

Why This Happens

The issue typically stems from one of a few key areas:

  • Cache Issues: Browser and WordPress caching can be extremely "sticky," preventing the updated editor-style.css from loading in the TinyMCE iframe.
  • Missing Formats Button: A very common culprit is the "Formats" button itself being absent from the active toolbar. This button must be present to access any custom styles.
  • Conflicting Settings: The "Create CSS classes menu" option within TinyMCE Advanced can sometimes interfere with other methods of adding styles, especially if used alongside other TinyMCE-enhancing plugins.
  • Plugin Conflicts: Other plugins, like Jetpack, may inject their own styles and override your custom style_formats configuration.
  • KSES Filtering (Multisite/User Roles): On WordPress Multisite installations or for users without the 'unfiltered_html' capability, WordPress's KSES security filters may strip out inline styles like list-style-type upon saving.

How to Fix It: Step-by-Step Solutions

1. Clear All Caches and Check for 404 Errors

This is always the first step. Clear your browser cache and perform a hard reload (Ctrl+F5 or Cmd+Shift+R). Also, check your browser's developer console (F12) for any 404 errors trying to load editor-style.css. If the file isn't found, ensure it is in your active theme's root directory.

2. Verify the Formats Button is on the Toolbar

This is the most frequent solution. The custom styles are accessed through the "Formats" button.

  1. Go to Settings > TinyMCE Advanced.
  2. In the toolbar configuration area, locate the "Formats" button. It is often in the "Unused Buttons" section.
  3. Drag the "Formats" button into one of your active toolbars (e.g., Toolbar 2).
  4. Save your settings and check the editor again.

3. Manage the "Create CSS classes menu" Setting

This powerful setting tells TinyMCE Advanced to automatically parse your editor-style.css and populate the Formats menu with the classes it finds. However, it can conflict with custom style_formats code from your theme's functions.php or other plugins.

  • If you want to use your manual style_formats array, ensure this option is unchecked.
  • If you want TinyMCE Advanced to handle it automatically, ensure this option is checked and that your editor-style.css file is present. Note: You may need to save the settings page twice for this change to take full effect, as a bug has been noted in this process.

4. Check for Plugin Conflicts

Temporarily disable other plugins, especially those that modify the editor like Jetpack or other TinyMCE extensions. If your styles reappear, you've found a conflict. You will need to reconfigure the conflicting plugin or adjust your custom code to ensure it loads with a higher priority.

5. Resolve KSES Filtering for User Roles (Multisite)

If list styles or other inline styles are being stripped for Editors or Authors, you need to modify the allowed CSS attributes. Add the following code to your theme's functions.php file to allow the list-style-type attribute:

function my_theme_allow_list_styles( $styles ) {
    $styles[] = 'list-style-type';
    return $styles;
}
add_filter( 'safe_style_css', 'my_theme_allow_list_styles' );

6. Force a Cache Busting Parameter

To force browsers to load a fresh version of your editor-style.css, you can add a version parameter. Add this code to your theme's functions.php:

function my_theme_editor_style_version( $url ) {
    if ( strpos( $url, 'editor-style.css' ) !== false ) {
        $url = add_query_arg( 'ver', time(), $url );
    }
    return $url;
}
add_filter( 'style_loader_src', 'my_theme_editor_style_version' );

By methodically working through these steps, you should be able to restore your valuable custom styles to the TinyMCE editor. The most common fix is simply ensuring the "Formats" button is enabled on the toolbar.

Related Support Threads Support