How to Add and Manage Custom Styles in the TinyMCE Advanced Dropdown Menu

Many WordPress users who install the TinyMCE Advanced plugin are looking to enhance their editing experience with custom styles. A common point of confusion is how to get those custom CSS classes to appear in the editor's 'Styles' dropdown menu. This guide will explain why this happens and walk you through the most reliable methods to add your own styles.

Why Don't My Custom Styles Appear?

The TinyMCE Advanced plugin does not automatically detect and import every CSS class from your theme. For the styles to appear in the dropdown, they must be explicitly registered with the TinyMCE editor itself. This is a security and performance feature of the underlying TinyMCE technology, not a limitation of the plugin. As noted in community discussions, achieving this functionality "is not possible without some coding" and is a "(complex) setting for TinyMCE."

Method 1: Using Your Theme's editor-style.css

The most integrated method is to use a dedicated CSS file for the editor. This approach ensures your editor's appearance matches your front-end theme.

1. In your theme's directory, create or edit a file named editor-style.css.
2. Add your custom CSS classes to this file. For example:

   .my-own-style {
       color: #2b2b2b;
       font-weight: bold;
   }
   

3. Ensure your theme's functions.php file enqueues this stylesheet for the editor. Add code similar to this:

   function my_theme_add_editor_styles() {
       add_editor_style( 'editor-style.css' );
   }
   add_action( 'admin_init', 'my_theme_add_editor_styles' );
   

4. As mentioned in a user's experience, you must then visit Settings → TinyMCE Advanced in your WordPress dashboard. In the Advanced Options section, ensure the option to import styles from the theme is active.

Note: A known limitation of this method is that it may import all styles from the editor-style.css file. To control which styles appear in the dropdown, you may need to make the selectors for unwanted styles more complex, as one suggestion notes.

Method 2: Using the TinyMCE style_formats Setting

For more granular control over the names and organization of the items in the dropdown, you can use TinyMCE's native style_formats configuration. This is considered the more powerful and correct approach.

1. Add the following code to your theme's functions.php file. This example adds a "Custom Styles" group with one style inside it.

   function my_custom_tinymce_styles( $settings ) {
       $style_formats = array(
           array(
               'title' => 'Custom Styles',
               'items' => array(
                   array(
                       'title' => 'My Own Style',
                       'selector' => 'p,h1,h2,h3,h4,h5,h6,li,dd',
                       'classes' => 'my-own-style'
                   )
               )
           )
       );
       $settings['style_formats'] = json_encode( $style_formats );
       return $settings;
   }
   add_filter( 'tiny_mce_before_init', 'my_custom_tinymce_styles' );
   

2. This code allows you to change the display name (e.g., 'My Own Style') to be more user-friendly than the raw class name (e.g., 'my-own-style').

Alternative Plugin Solutions

If adding code to your theme is not an option, some third-party plugins can help manage this configuration through a user interface. Community threads have mentioned plugins like Advanced TinyMCE Configuration or Just TinyMCE Custom Styles as potential tools that can work alongside TinyMCE Advanced to add these settings. The effectiveness of these plugins can vary, so be sure to check their compatibility with your current WordPress and plugin versions.

Troubleshooting Common Issues

• No 'Styles' dropdown at all: First, drag the "Formats" button from the unused buttons section into your toolbar layout on the TinyMCE Advanced settings page.
• Styles still not appearing: After making any changes, clear your browser cache and perform a hard refresh (Ctrl+F5 on Windows, Cmd+Shift+R on Mac) to see the changes.

By understanding that custom styles require explicit registration, you can use either the editor-style.css method or the more flexible style_formats method to fully customize your editing experience with TinyMCE Advanced.