Add custom CSS classes to the wysiwyg drop-down

  • How can I add custom classes to the drop-down ‘Class’ menu that appears when editing a link or image in TinyMCE (the one that allows you to select ‘alignleft’ and ‘wp-caption’)?

    Some of the links on my client’s site have a special icon and this is done by adding a class of ‘internal’. Rather than ask my client to faff around with the HTML it would be nice if they could just select the class from the drop-down.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter tamlyn

    (@tamlyn)

    Solution is in the mce_css hook. Add the following to your functions.php to import all your custom styles:

    function ses_tinymce_css($wp) {
        $wp .= ',' . get_bloginfo('stylesheet_url');
        return $wp;
}
add_filter( 'mce_css', 'ses_tinymce_css' );

    Many thanks to Lee Willis for this elegant solution.

    Thank you very much!!

    This is really great, however a side effect is that the content section takes on a very odd CSS. Partially from the theme, and partially from default wordpress. For example I have grey background, dark grey text, but the text is centered and the links are default colors… makes for a disconnected experience.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Add custom CSS classes to the wysiwyg drop-down’ is closed to new replies.

Tags